Question

有没有办法让以下盒子模型起作用。我在容器中有2个div，应该并排显示。我遇到的问题是我必须将左侧div推到一定数量也试图远离右边的负余量因为它制动响应式布局。

<div id="header">
    <div id="left"></div>
    <div id="right">
        <div class="box">
            <div class="box_in">Sample</div>
        </div>
        <div class="box">
            <div class="box_in">Sample</div>
        </div>
        <div class="box">
            <div class="box_in">Sample</div>
        </div>
    </div>
</div>


#header {
    width:800px;
    margin:0 auto;
    overflow:hidden;
    background:#ccc;
    padding:15px;
}
#left, #right {
    display:table;
    background:green;
    height:200px;
}
#left {
    width:20%;
    float:left;
    margin-left:10px;
}
#right {
    width:80%;
    float:right;
    margin-left:10px;
}
.box {
    width:33.33%;
    float:left;
}
.box_in {
    background:red;
    margin:10px;
    display:block;
    height:100px;
}

感谢任何帮助。

Answer 1

这是解决方案

http://jsfiddle.net/Ubg6H/6/

使用

display:table;

和

display:table-cell;

Thnx to

http://mihaifrentiu.com/how-to-fill-the-available-space-when-using-floated-divs

Answer 2

您需要做的就是减小右侧div的宽度，它将向上滑动并排。我认为你还有一些其他的东西，你可能应该返工，以便做好反应。但无论如何问题是两个div目前并没有并排放置的空间。因此，您可以通过减少边距或减小宽度来修复它。

编辑：我绝对不会使用魔术数字，但正如CodeMonkeyG所说，魔术数字和数学之间存在差异。但是，您可以使用css计算来计算差异。例如：您将使用百分比作为流体宽度，80px将是您的固定边距和填充等于的值。

width: calc(100% - 80px);

如果您愿意，您还可以选择基于百分比的边距和填充。 Calc可能会让你更好地控制。除非您计划继续进行一些媒体查询。

Answer 3

更改为

#right {
width:77%;
float:right;
margin-left:10px;}

#right {width：80％;}与边距太多，所以它在左边的div下面#right

http://jsfiddle.net/Ubg6H/3/

以百分比和边距并排显示div？

3 个答案: