0

我有 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;}
4

7 回答 7

1

I put some colors on each background to make it clear, you're maybe lacking a width and height for each element..

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

http://jsfiddle.net/n9mHX/

于 2013-07-18T12:27:06.207 回答
1

Float: left应该根据父级的宽度和boxand 的宽度来解决问题。如果父母有并且两者都有。你应该没事。boxleftboxrightboxwidth: 500px;boxleftboxrightwidth: 250px; float:left;

于 2013-07-18T12:24:04.100 回答
1

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

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

于 2013-07-18T12:24:16.007 回答
0

如果您不是“CSS 专家”，请查看http://twitter.github.io/bootstrap/。使用引导程序，将两个 div 放在同一行是这样完成的：

<div class="row-fluid box">
    <div class="span6 boxleft"></div>
    <div class="span6 boxright"></div>
</div>
于 2013-07-18T12:25:35.783 回答
0

You need to clear the floats via clearfix on the parent container. 

.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;
}

The border is adding 2px to your divs width. That's why I specified it with 704px.

Using inline-block as display for the left and right box should work too.

于 2013-07-18T12:27:07.500 回答
0

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

于 2013-07-18T12:23:42.103 回答
0

您可以使用

display:inline-block;

或者

float

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

display: table-cell

或者你可以使用

clear: both
于 2013-07-18T12:23:49.813 回答