Question

这是我想要的：

这就是我所拥有的：

这是我正在使用的CSS代码：

#pagewrap {
    padding: 5px;
    width: 100%;
    margin: 20px auto;
}
#board{
    //middle box
    background:#CCC;
    border:#999 1px solid;
    width: 560px;
    float: left;
    padding: 5px 15px;
    margin: 0px 5px;
    padding-left: 20%;
    padding-right: 20%; 
}

#menu {
    //Left box
    width: 15%;
    background-color: grey;
    float: left;
    padding: 5px 15px;

}
#leaderboard {
    //right box
    width: 15%;
    float: right;
    background-color: grey;
    padding: 5px 15px;
}

EDIT1：添加了jsfiddle

jsfiddle.net/Xn3u6/

Answer 1

有很多方法可以达到预期效果，使用display:table和display:table-cell是最简单的方法之一。

首先检查 DEMO 。

#pagewrap {
padding: 5px;
width: 100%;
margin: 20px auto;
display:table;
}
#board{
padding: 5px;
background-color:#cccccc;
display:table-cell;
}
#menu {
padding: 5px;
background-color: red;
display:table-cell;
}
#leaderboard {
padding: 5px;
display:table-cell;
background-color: green;
}

使用flex也可以达到同样的效果，但IE8和IE9并没有广泛支持。

使用Flex Method检查 DEMO 。

#pagewrap
{display:flex;
display: -webkit-flex;
display: -moz-flex;
width:100%;
}
#board{
padding: 5px;
background-color:#cccccc;
width:25%;
}
#menu {
padding: 5px;
background-color: red;
width:50%;
}
#leaderboard {
padding: 5px;
background-color: green;
width:25%;
}

Answer 2

看看这个小提琴：http://jsfiddle.net/SNAG12/Xn3u6/2/ 。在所有三种情况下，我建议％宽度。代码：

*{
    box-sizing: border-box;
}
div{
    display:inline-block;
    height:30px;
}
#pagewrap {
    padding: 5px;
    width: 100%;

}
#board{

        background:#CCC;
        border:#999 1px solid;
        width: 70%;
        float: left;
        padding: 5px 15px;

        padding-left: 20%;
        padding-right: 20%; 
    }

#menu {
    width: 15%;
    background-color: grey;
    float: left;
    padding: 5px 15px;

}
#leaderboard {
    width: 15%;
    float: right;
    background-color: grey;
   padding: 5px 15px;
}

Answer 3

DEMO

   #board{
        background:#CCC;
        border:#999 1px solid;
        width: 560px; /* change this to percentage to be fluid*/
        float: left;
        padding: 4px 15px;
    }

   #menu {
      width: 15%;
      background-color: grey;
      float: left;
      padding: 5px 15px;
   }
  #leaderboard {
     width: 15%;
     float: left;
     background-color: grey;
     padding: 5px 15px;
  }

Answer 4

男人！你真的必须学习CSS和CSS盒子模型： https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

我也更新了你的小提琴，所以你得到一个想法，什么会奏效。基本上我添加了box-sizing: border-box;并删除了margin，因此框的宽度是合适的。 http://jsfiddle.net/Xn3u6/5/

Div元素不会彼此对齐

4 个答案: