gpt4 book ai didi

css - 像 vBulletin 这样的 CSS 灵活布局

转载 作者:行者123 更新时间:2023-11-28 13:49:13 24 4
gpt4 key购买 nike

当您调整 vBulletin 的大小时您可以看到 3 列很好地重新缩放(董事会名称、主题/帖子、最后的帖子)。

如何在 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;
}

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

最佳答案

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

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

关于css - 像 vBulletin 这样的 CSS 灵活布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11570778/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com