Question

我有2个div，我想将它们对齐在同一行。 html代码是：

<div class="box">
<div class="boxleft"> </div>
<div class="boxright"> </div>
</div>

我试过'浮动：左;'和'浮动：正确;'但是背景变得疯狂，它的高度只有~30px。我试图设置一个高度（'直到那时我没有在CSS中使用高度）。它没有工作。我也试过'display：inline-block'，但没有成功。

感谢。

CSS：

.box {
width: 956px;
margin-left: auto;
margin-right: auto;
background: #584231;}

.boxleft {
width: 706px;
margin-right: auto;
border-right: 2px solid black;}

 .boxright {
width: 250px;
margin-left: auto;
float: right;}

Answer 1

Float: left应根据父box的宽度以及boxleft和boxright的宽度来实现。如果父box有width: 500px;，boxleft和boxright都有width: 250px; float:left;。你应该没事。

Answer 2

查看css属性float:left和clear:both。

http://www.w3schools.com/css/css_float.asp

Answer 3

我在每个背景上放了一些颜色以使其清晰，你可能缺少每个元素的宽度和高度..

.boxleft , .boxright {
    float : left;
    width : 200px;
    height : 100px;
    margin : 10px;
}
.boxleft {
    background : yellow;
}
.boxright {
    background : blue;
}

http://jsfiddle.net/n9mHX/

Answer 4

现在大多数现代浏览器display: table-cell是浮动的更好选择。

Answer 5

您可以使用

display:inline-block;

或

float

或根据最新的浏览器，您可以使用

display: table-cell

或者您可以使用

clear: both

Answer 6

如果您不是“CSS家伙”，请查看http://twitter.github.io/bootstrap/。使用bootstrap，将两个div放在同一行上就是这样做的：

<div class="row-fluid box">
    <div class="span6 boxleft"></div>
    <div class="span6 boxright"></div>
</div>

Answer 7

您需要通过父容器上的clearfix清除浮动。

.box {
    width: 956px;
    background: #584231;
}

/* clearfix */
.box:after {
     content: '';
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.boxleft {
    width: 704px;
    border-right: 2px solid black;
    float: left;
}

.boxright {
    width: 250px;
    float: right;
}

边框正在向div的宽度添加2px。这就是我用704px指定它的原因。

使用inline-block作为左侧和右侧的display框也应该有用。

怎么能把两个div放在同一条线上？

7 个答案: