CSS中的灵活布局,如vBulletin

时间:2012-07-19 23:27:18

标签: css

当您调整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;
}

以下是使用相同灵活布局的其他一些示例:

1 个答案:

答案 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以保持%宽度的定位。