div和桌子和盒子

I wanted to design somethin like this 我想要設計這樣的東西。div和桌子和盒子

我努力的風格我的代碼和我還是不能在我的HTML做我有這樣的：

<div id="main"> 
    <div class="box1"> 
    <div class='up'><a href="" class="vote" id="<?php echo $id; ?>" name="up"> 
    <?php echo $up; ?></a></div> 
    <div class='down'><a href="" class="vote" id="<?php echo $id; ?>" name="down"><?php echo $down; ?></a></div> 
    </div> 
    <div class='box2' > 
    <table cellspacing="10"> 

    <tr> 
    <td> 
    artist:<?php echo $artist; ?> 
    </td> 
    <td> 
    Song:<?php echo $title; ?> 
    </td> 
    </tr> 
    <tr> 
    <td> 
    album:<?php echo $album; ?> 
    </td> 
    <td> 
    genre:<?php echo $genre; ?> 
    </td> 
    <td> 

    <button type = "button" name = "Download" onClick = <?php echo $filename;?>> 
    Download 
    </button> 
    </div> 
    </td> 
    </tr> 
    </table> 
    </div> 
    </div>

，風格我有這樣的：

#main 
{ 
height:80px; border:1px dashed #29ABE2;margin-bottom:7px; 
width:600px; 
} 
a 
{ 
color:#DF3D82; 
text-decoration:none; 

} 
a:hover 
{ 
color:#DF3D82; 
text-decoration:underline; 

} 
.up 
{ 
height:40px; font-size:24px; text-align:center; background-color:#009900; margin-bottom:2px; 
-moz-border-radius: 6px;-webkit-border-radius: 6px; 
} 
.up a 
{ 
color:#FFFFFF; 
text-decoration:none; 

} 
.up a:hover 
{ 
color:#FFFFFF; 
text-decoration:none; 

} 
.down 
{ 
height:40px; font-size:24px; text-align:center; background-color:#cc0000; margin-top:2px; 
-moz-border-radius: 6px;-webkit-border-radius: 6px; 
} 

.down a 
{ 
color:#FFFFFF; 
text-decoration:none; 

} 
.down a:hover 
{ 
color:#FFFFFF; 
text-decoration:none; 

} 
.box1 
{ 
float:left; height:80px; width:50px; 
} 
.box2 
{ 
float:left; width:500px; text-align:left; 
margin-left:10px;height:60px;margin-top:5px; 
font-size:15px; 
} 
.box3 
{ 
float:right; height:80px; width:60px; 
} 
img 
{ 
border:none; 
padding-top:7px; 
}

我的結果看起來是這樣的：

enter image description here

來源

2012-10-11 Nickool

放置butto n出.box2 div。並用div包裝按鈕。

改變CSS

#main 
{ 
height:80px; border:1px dashed #29ABE2;margin-bottom:7px; 
width:600px; position:relative 
} 
    .box2 
    { 
    float:left; width:430px; text-align:left; 
    margin-left:10px;height:60px;margin-top:5px; 
    font-size:15px; background:#993 
    } 
    .button{float:right; position:absolute; bottom:0; right:0}

HTML

<div class="button"> 
<button type = "button" name = "Download" onClick = <?php echo $filename;?>>Download</button> 
</div>

演示http://jsfiddle.net/GPqS2/

來源

2012-10-11 09:20:47 Sowmya

嗨請檢查this code。它工作正常，並適合您的要求。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
    #main { 
    position:relative; 
    width:620px; 
    height:auto; 
    padding:0px; 
    margin:0px; 
    border:1px solid red; 
    min-height:200px; 
    } 
    .up { 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:100px; 
    width:100px; 
    background-color:#00ff00; 
    } 
    .down { 
    position:absolute; 
    bottom:0px; 
    left:0px; 
    height:100px; 
    width:100px; 
    background-color:#ff0000; 
    } 
    .box2 { 

    margin:0 auto; 
    width:400px; 
    } 
    .box2 table { 
    width:100%; 
    } 
    .box2 table td { 
    background-color:#ffffff; 
    padding:5px; 
    text-align:center; 
    } 


    .box3 { 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    width:100px; 
    height:100px; 
    background-color:blue; 
    } 

    .box3 button{ 
    float: left; 
    margin: 74px 0 0 3px; 
    } 


</style> 
</head> 

<body> 
    <div id="main"> 

     <div class='up'> 
     <a href="" class="vote" id="" name="up"> 
      Up 
     </a> 
     </div> 
     <div class='down'> 
     <a href="" class="vote" id="" name="down">Down</a> 
     </div> 

    <div class='box2' > 
     <table cellspacing="0" cellpadding="0" border="1"> 

     <tr> 
     <td> 
     artist:<?php echo $artist; ?> 
     </td> 
     <td> 
     Song:<?php echo $title; ?> 
     </td> 
     </tr> 
     <tr> 
     <td> 
     album:<?php echo $album; ?> 
     </td> 
     <td> 
     genre:<?php echo $genre; ?> 
     </td> 
     </tr> 
    </table> 
    </div> 
    <div class="box3"> 
    <button type = "button" name = "Download" onClick = <?php echo $filename;?>> 
     Download 
     </button> 
    </div> 
</div> 
</body> 
</html>

來源

2012-10-11 12:41:06 AppMobiGurmeet

謝謝，我Up投U – Nickool

div和桌子和盒子

回答

相關問題