css - CSS 中的灵活布局，如 vBulletin

Question

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

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

score 0 · Accepted Answer

它背后的 CSS 对于现代浏览器来说并不复杂。尽管这些技术中的一些在不进行一些修改的情况下无法在早期版本的 ie 中工作。

使用这个 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 宽度。唯一使用固定宽度值的时间应该是最小宽度声明。

例如，您可以在画布 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以 % 宽度保持定位。

css - CSS 中的灵活布局，如 vBulletin

1 回答 1

Related

Reference