Question

I wanted to design somethin like this 我想设计这样的东西。

我努力设计我的代码，但我仍然无法做到在我的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

Answer 1

您好请检查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>

Answer 2

将按钮放在.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/

div和桌子和盒子

2 个答案: