我正在尝试创建 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;
}
谢谢
最佳答案
是这样的吗?添加 float :左;到 slider1 你也错过了 css 中拼写的 slider1
.slider1 {
height: 50px;
border:1px solid blue;
overflow: hidden;
float: left;
background: blue;
}
关于html - float 中心部分内的 CSS 部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26730559/