首先对那个糟糕的标题感到抱歉。
好吧..我需要实现这个布局:
http://imgur.com/HmEf7lD,f4qUked#1
到目前为止我得到了这个:
http://imgur.com/HmEf7lD,f4qUked#0
我的问题是,我可以将 leftBar、Content、rightBar 彼此对齐。但我希望条形图直接到达底部,并在它们之间(在内容下方)我的 3 个框彼此相邻。
我怎样才能完成这件事?感谢您的每一个回复!
这是第一次尝试:
/* Contains everything below */
.webContainer {
width: 100%;
}
/* Side Bars */
.leftBar, .rightBar{
width: 15%;
height: 600px;
float: left;
}
/* Slider between 2 Bars */
.slider {
width: 70%;
float: left;
}
/* Boxes below Slider */
.firstBox, .secondBox, .thirdBox {
width: 20%;
height: 200px;
float: left;
}
HTML 看起来像这样:
<div class="webContainer">
<div class="leftBar">
//leftBar Content
</div>
<div class="slider">
//Slider code
</div>
<div class="rightBar">
//rightBar Content
</div>
<div class="fistBox">
//Content
</div>
<div class="secondBox">
//Content
</div>
<div class="thirdBox">
//Content
</div>
</div>
感谢您的帮助!
编辑:感谢您的回答,我已经标记了我认为最好的答案。另外,我发布的 HTML 只是一段代码,供你们了解我在构建什么。我正在使用 PHP,每个部分都在不同的 PHP 文件中。所以实际代码更“复杂”——这个应该只是给出一个想法。
最佳答案
固定:JSFiddle
将 .rightBar 向右浮动
.rightBar {
float: right;
}
并删除 html 中的拼写错误。 .firstBox 而不是 .fistBox。 (注意 R)。
关于html - 需要实现特定的CSS Layout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27088527/