当您调整vBulletin的大小时，您可以看到3列很好地重新缩放（Board Name，Threads / Posts，Last Post）。
你怎么能在CSS中实现类似的东西？当我尝试这样做时，它总是相互重叠。 .board-icon宽度需要保持不变，因为里面有图像。
这是我的CSS
.board-icon {
float: left;
width: 55px;
}
.board-title {
float: left;
background: red;
width: 50%;
}
.board-info {
float: left;
background: green;
width: 120px;
}
.board-lastpost {
float: left;
background: orange;
width: 240px;
}
以下是使用相同灵活布局的其他一些示例：
答案 0 :(得分：0)
现有浏览器背后的CSS并不复杂。虽然其中一些技术在早期版本中不起作用，即没有一些修改。
使用此HTML
<body>
<div id="canvas">
...
</div>
</body>
这个CSS
body {
margin:0;
padding:0;
position:relative;
}
#canvas, .main-width {
min-width:960px;
width: 80%;
margin:0 auto;
}
.clear, #canvas:after {
clear: both;
height: 0;
visibility: hidden;
#canvas:after {
content: ".";
display: block;
}
开始使用％宽度，而不是像示例中那样使用px宽度。使用固定宽度值的唯一时间应该是在最小宽度的延伸上。
您可以在canvas div中创建两个流体列，例如
<div class="col1>
...
</div>
<div class="col2">
...
</div>
<br class="clear" />
CSS（现在不需要最小宽度作为960px的34％同样好）
.col1,.col2 {
float:left;
}
.col1 {
width:34%;
}
.col2 {
width:66%;
}
注意上面的.main-width声明？这将#canvas样式应用于#canvas div中的任何容器，使其具有完全相同的宽度和流动性。
<div class="main-width"> ... </div>
这应该让你在正确的轨道上，只记得你需要在％而不是px工作。如果您需要在元素上使用边框，请确保它们display:block以保持％宽度的定位。