Question

我正在尝试创建3列主页布局，其中中心，左侧和右侧看起来很好，但我无法在div类middle内创建2个滑块分区，我实际上期望slider1应该位于顶部，但是应该在类middle内，以及在类middle内的slider1之后的slider2。

正如你在这里看到JSFIDDLE，slider2和slider1不会进入div class middle

这是我的努力

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

这样的事情？添加浮动：左;到slider1你也错过了css中拼写的slider1

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

http://jsfiddle.net/fa308n2b/

Answer 2

检查您的班级名称

.slder1 { 
        height: 50px;
        border:1px solid green; 
}

.slder1应该是.slider1

浮动中心区内的CSS部门

2 个答案: