html - float 中心部分内的 CSS 部分

Question

我正在尝试创建 3 列主页布局，其中中心、左侧和右侧看起来不错，但我无法在 div 类 middle 中创建 2 个 slider 划分，我实际上希望 slider1 应该出现在顶部，但应该在类 middle 内，并且 slider2 在 slider1 之后在类 middle 内。

正如你在这里看到的JSFIDDLE , slider2 和 slider1 没有进入 div 类中间

这是我的努力

HTML

<div id="content-container">
    <div class="middle">
          <div class="slider1"></div>
          <div class="slider2"></div>
   </div>
   <div class="left">
          <div></div>
          <div></div>
   </div>
   <div class="right">
          <div></div>
          <div></div>
   </div>
</div>

CSS

/* Container */
#content-container{
    background:white;
    margin-top:10px;
    margin-bottom:10px;
    height:600px;
}

/* follow container height*/
.left,.right,.middle{
    height:100%;
}

.left{
    float: left; 
    width: 23%; 
    border:1px solid red;
}
.right{
    float: right; 
    width: 23%; 
    border:1px solid red;
}
.middle{ 
     display: inline-block; 
     width: 53%; 
     border:1px solid red;
}


/* Sliders */
.slider1 { 
        height: 50px;
        border:1px solid green; 
}
.slider2 {  

        height:60px; 
        border:1px solid green;
}

谢谢

Answer 1

是这样的吗？添加 float :左；到 slider1 你也错过了 css 中拼写的 slider1

.slider1 { 
        height: 50px;
        border:1px solid blue;
        overflow: hidden;
        float: left;
        background: blue;
}

http://jsfiddle.net/fa308n2b/