Question

首先抱歉这个糟糕的标题。

好吧..我需要实现这个布局：

到目前为止我得到了这个：

我的问题是，我可以将leftBar，Content，rightBar对齐。但我希望Bars直接进入Bottom并在它们之间（在Content下面）我的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文件中......所以实际代码更多＆＃34; compicated＆＃34; - 这应该只是一个想法。

Answer 1

修正：JSFiddle

将.rightBar浮动到右侧

.rightBar {
    float: right;
}

并删除你的HTML中的拼写错误。 .firstBox 而不是 .fistBox 。（注意R）。

Answer 2

在jsfiddle

上查看

使用位置的另一种解决方案，使布局流畅。

它不是一个完美的，因为我不是设计师，但它应该让你知道如何解决这个问题

body {
    position: relative;
    margin: 0;
    padding: 0;
}

header {
    width: 100%;
    height: 100px;
    background: lightgreen;
}

.left-bar {
    position: absolute;
    top: 100px;
    bottom: 0;
    width: 200px;
    background: blue;
}

.right-bar {
    position: absolute;
    right: 0;
    width: 200px;
    background-color: blue;
    bottom: 0;
    top: 100px;
}

.container {
    position: absolute;
    top: 100px;
    left: 200px;
    right: 200px;
    bottom: 0;
}

.container .slider {
    width: 100%;
    height: 50%;
    background: red;
}

.container .box-1 {
    width: 33.3%;
    background-color: black;
    position: absolute;
    top: 50%;
    bottom: 0;
}

.container .box-2 {
    width: 33.3%;
    background-color: green;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 33.3%;
}

.container .box-3 {
    width: 33.4%;
    background-color: yellow;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 66.6%;
}

html

<link rel="stylesheet" href="style.css">
<header></header>
<div class="left-bar"></div>
<div class="container">
    <div class="slider"></div>
    <div class="box-1"></div>
    <div class="box-2"></div>
    <div class="box-3"></div>
</div>
<div class="right-bar"></div>

Answer 3

在http://jsfiddle.net/zxxpuzct/

查找代码

以下是代码。

<!doctype html>
<html>
<style>
div{
border:1px solid red;
box-sizing: border-box;
}
.webContainer
{
width:600px;
    height:600px;
}
.leftBar, .rightBar{
    width: 15%;
    height: 100%;
}
 .rightBar{
 float:right;
}
.leftBar{
float:left;    
}
.slider{
    width:70%;
    height:25%;
    float:left;
 }
.firstBox, .secondBox, .thirdBox {
    width: 23.333%;
    height: 75%;
    float: left;
}
</style>
<body>
<div class="webContainer">

   <div class="leftBar">
     //leftBar Content
   </div>

   <div class="slider">
      //Slider code
   </div>

   <div class="rightBar">
     //rightBar Content
   </div>

   <div class="firstBox">
     //Content
   </div>
   <div class="secondBox">
     //Content
   </div>
   <div class="thirdBox">
     //Content
   </div>
</div>
</body>
</html>

我使用内边框来更好地看到div。为webContainer设置所需的宽度和高度。您在以下问题中遇到拼写错误：）

需要实现特定的CSS布局

3 个答案: