制作具有灵活中间的 3 列网格答案

【问题标题】：Making a 3-column grid with flexible middle制作具有灵活中间的 3 列网格
【发布时间】：2012-10-09 18:45:26
【问题描述】：

我解决了我遇到的一个问题，我认为该解决方案可能对其他人有所帮助。

我需要一个 3 列布局，其中包含固定的左右列和灵活的中心。它需要填充列之间的空间，无论它如何更改，因此无法修复。这很奇怪，似乎不会起作用，但它就像魔术一样。

我修改了这里放在一起的内容http://jsfiddle.net/qx32C/36/

这是我的 3 列版本的演示 http://jsfiddle.net/chazthetic/qx32C/294/

HTML

<div class="container">
<div class="right">lkasjdfl;<br />kjasdf;<br />lkjas;<br />ldfkjdjf</div>
<div class="lineContainer">
    <div class="left">lkasjdfl;<br />kjasdf;<br />ldfkja;<br />sldfjk;laksdjf</div>
    <div class="middle">lkasjdfl;<br />kjasdf;<br />lkjas;</div>
</div>

CSS

.lineContainer {
    overflow: hidden; /* clear the float */
    border: 1px solid #000
}
.lineContainer div {
    height: auto;
} 
.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.middle {
    margin-left: 100px;
    background: #ccc
}
.right {
    width: 100px;
    float: right;
    border: 1px solid #000
}

【问题讨论】：

标签： html css dynamic-columns two-columns

【解决方案1】：

你也应该只浮动中间的左边。这将允许元素全部依赖于浏览器的大小。

.left {
    width: 100px;
    float: left;
    border-right: 1px solid #000
}
.middle {
    float:left;
    background: #ccc
}
.right {
    width: 100px;
    float: right;
    border: 1px solid #000
}

【讨论】：