我有一个背景色为白色的包装器 div 集,但我的所有元素都显示在包装器下方,即使我将它们设置在其中。我认为这可能与我正在使用的 slider 的 css 有关,但我不确定要寻找什么。
/*MY CSS*/
#content-wrapper {
padding-top: 4em;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
#left-block {
width: 49%;
}
#right-block {
float: right;
width: 45%;
}
#block-one, #block-two {
width: 100%;
height: 12em;
background-color: black;
vertical-align: top;
margin-bottom: 10px;
}
/*SLIDER CSS*/
.bx-wrapper {
position: relative;
margin: 0 0 60px;
padding: 0;
*zoom: 1;
width: 100%;
float: left;
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
left: -5px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
<div id="content-wrapper">
<div id="left-block">
<ul class="bxslider">
<li><img src="../images/slider/test-slide-1.svg" /></li>
<li><img src="../images/slider/test-slide-2.svg" /></li>
<li><img src="../images/slider/test-slide-3.svg" /></li>
</ul>
</div>
<div id="right-block">
<div id="block-one"></div>
<div id="block-two"></div>
</div>
</div>
最佳答案
您需要在 CSS 中为 #left-block
指定 float: left;
属性。
/*MY CSS*/
#content-wrapper {
padding-top: 4em;
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: #fff;
}
#left-block {
width: 49%;
float: left;
}
#right-block {
float: right;
width: 45%;
}
#block-one, #block-two {
width: 100%;
height: 12em;
background-color: black;
vertical-align: top;
margin-bottom: 10px;
}
/*SLIDER CSS*/
.bx-wrapper {
position: relative;
margin: 0 0 60px;
padding: 0;
*zoom: 1;
width: 100%;
float: left;
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border: 5px solid #fff;
left: -5px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
transform: translatez(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
<div id="content-wrapper">
<div id="left-block">
<ul class="bxslider">
<li><img src="../images/slider/test-slide-1.svg" /></li>
<li><img src="../images/slider/test-slide-2.svg" /></li>
<li><img src="../images/slider/test-slide-3.svg" /></li>
</ul>
</div>
<div id="right-block">
<div id="block-one"></div>
<div id="block-two"></div>
</div>
</div>
关于javascript - 元素没有出现在包装器中,它们在下面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26498720/