我解决了一个我遇到的问题,我认为这个解决方案可能对其他人有帮助。
我需要一个 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
}
最佳答案
你也应该只 float 中间的左边。这将允许所有元素都取决于浏览器的大小。
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.middle {
float:left;
background: #ccc
}
.right {
width: 100px;
float: right;
border: 1px solid #000
}
关于html - 制作一个中间灵活的三列网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12806418/