Question

我不能让div正确排队，他们要么从容器中跳出来，要么彼此重叠，我希望容器中的3个div等间隔但是它不会工作，每个div都相应地命名为position和i已经玩过清晰和漂浮的设置，但它不会去

HTML：

 <div class="triplecontainer">

<div class="leftbox">
<p> LEFT </p>
</div>


<div class="middlebox">
<P> MIDDLE </P>
</div>


<div class"rightbox">
<P> RIGHT</P>
</div>



</div>

CSS：

.triplecontainer {
height: 200px;
width: 950px;   
margin-right:auto;
margin-left:auto;
margin-top:10px;

}

.leftbox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
clear: none;
float: left;

}

.middlebox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
float:none;
clear:left

}

.rightbox {
height: 180px;
width: 250px;
margin-top: 10px;
margin-left: 10px;
float:none;
clear:both;

}

Answer 1

display: inline-block;

全部添加。这就是你所缺少的，你可能仍然需要调整像素宽度。还有，你有

clear: both;

删除它！实际上，删除所有清除命令。

Answer 2

我建议使用固定的桌面显示器：

.triplecontainer {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.triplecontainer > div {
    display: table-cell;
}

JSFiddle demo

divs不能正确地融合在一起

2 个答案: