0
我的網站由很多divs組成，這些div是頁面環繞的，但由於某些原因，所有4張圖片都顯示在另一個下面，在彼此之上。以下CSS包含與包含的HTML相關的所有CSS。正如您在下面看到的，圖片嵌入在白盒div中，而圖像垂直地位於下方。我不確定這是因爲CSS /定位還是因爲我的代碼有問題。請幫忙！旋轉木馬圖像低於另一個堆疊
HTML：
<!-- Content -->
<div class="content">
<section>
<div class="image featured">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/img_lathing2.jpg" alt="Lathing">
</div>
<div class="item">
<img src="images/img_milling2.jpg" alt="Milling">
</div>
<div class="item">
<img src="images/img_drilling2.jpg" alt="Drilling">
</div>
<div class="item">
<img src="images/img_turning2.jpg" alt="Turning">
</div>
<div>
<!-- LEFT AND RIGHT CONTROLS -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</section>
</div>
CSS：
/* Carousel */
.carousel .item img {
margin: 0 auto;
width: 100%;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
/* circles */
.carousel-indicators {
bottom: 20px;
position: absolute;
left: 50%;
z-index: 15;
width: 60%;
padding-left: 0;
margin-left: -30%;
text-align: center;
list-style: none;
margin-top: 0;
margin-bottom: 10px;
box-sizing: border-box;
height: 100px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
/* Image */
.image {
border: 0;
position: relative;
}
.image:before {
/*background: url("images/overlay.png"); */
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.image.fit {
display: block;
}
.image.fit img {
display: block;
width: 100%;
}
.image.featured {
display: block;
margin: 0 0 2em 0;
}
.image.featured img {
display: block;
width: 100%;
}
/* Wrapper */
.wrapper {
margin-bottom: 5em;
padding: 5em;
}
.wrapper.style1 {
padding: 0;
}
.wrapper.style2 {
background-color: #83d3c9;
background-image: url("images/light-bl.svg"), url("images/light-br.svg");
background-position: bottom left, bottom right;
background-repeat: no-repeat, no-repeat;
background-size: 25em, 25em;
color: #fff;
}
.wrapper.style2 .button:hover {
background: rgba(255, 255, 255, 0.15) !important;
}
.wrapper.style2 .button.special {
background: #fff;
border-color: #fff;
color: #83d3c9 !important;
}
.wrapper.style2 .button.special:hover {
border-color: inherit !important;
color: #fff !important;
}
.wrapper.style3 {
background: #fff;
color: inherit;
}
.wrapper.style4 {
background: #fff;
color: inherit;
padding: 4em;
}
/* Containers */
.container {
margin-left: auto;
margin-right: auto;
}
.container.\31 25\25 {
width: 100%;
max-width: 1750px;
min-width: 1400px;
}
.container.\37 5\25 {
width: 1050px;
}
.container.\35 0\25 {
width: 700px;
}
.container.\32 5\25 {
width: 350px;
}
.container {
width: 1400px;
}
@media screen and (max-width: 1680px) {
.container.\31 25\25 {
width: 100%;
max-width: 1500px;
min-width: 1200px;
}
.container.\37 5\25 {
width: 900px;
}
.container.\35 0\25 {
width: 600px;
}
.container.\32 5\25 {
width: 300px;
}
.container {
width: 1200px;
}
}
@media screen and (max-width: 1280px) {
.container.\31 25\25 {
width: 100%;
max-width: 1200px;
min-width: 960px;
}
.container.\37 5\25 {
width: 720px;
}
.container.\35 0\25 {
width: 480px;
}
.container.\32 5\25 {
width: 240px;
}
.container {
width: 960px;
}
}
@media screen and (max-width: 980px) {
.container.\31 25\25 {
width: 100%;
max-width: 118.75%;
min-width: 95%;
}
.container.\37 5\25 {
width: 71.25%;
}
.container.\35 0\25 {
width: 47.5%;
}
.container.\32 5\25 {
width: 23.75%;
}
.container {
width: 95%;
}
}
@media screen and (max-width: 840px) {
.container.\31 25\25 {
width: 100%;
max-width: 118.75%;
min-width: 95%;
}
.container.\37 5\25 {
width: 71.25%;
}
.container.\35 0\25 {
width: 47.5%;
}
.container.\32 5\25 {
width: 23.75%;
}
.container {
width: 95% !important;
}
}
@media screen and (max-width: 736px) {
.container.\31 25\25 {
width: 100%;
max-width: 125%;
min-width: 100%;
}
.container.\37 5\25 {
width: 75%;
}
.container.\35 0\25 {
width: 50%;
}
.container.\32 5\25 {
width: 25%;
}
.container {
width: 100% !important;
}
}