<分区>
如果可能的话，我想避免绝对定位...... 我有以下 html 代码:
<section class="mainfeatures" id="features">
<!-- Container -->
<div class="container small-width">
<div class="one_half text-align-center">
<div id="standleft">
<img src="http://www.fusionkatz.com/Assets/Jerome%201.jpg" alt="" >
</div>
<div id="standright">
<img src="http://www.koreanfilm.org/tom/wp-content/uploads/dancing-cat2.jpg" alt="">
</div>
</div>
<div class="one_half last">
<div class="middle_part2">
<h2>lorem ipsum lorem ipsum</h2>
<p >lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>
</div>
</div>
<!--/Container -->
</section>
和它的CSS:
.one_half {
width: 48%;
}
.one_half {
float: left;
margin-bottom: 20px;
margin-right: 4%;
position: relative;
}
.last {
margin-right: 0px!important;
}
.text-align-center {
text-align: center;
}
@media only screen and (max-width: 1024px) {
.container.small-width {
width: 600px;
}
.one_half {
margin-bottom: 20px;
margin-right: 0%;
}
.one_half {
width: 100%;
}
}
到目前为止，正如您在我的 fiddle 中看到的那样:http://jsfiddle.net/zgobmdL2/在两个(普通和媒体)屏幕上，两个图像一个在另一个上面。我想要一个图像真正重叠另一个，就像这里:http://i.imgur.com/OqU5nJa.png在移动浏览的情况下，就像这里: http://i.imgur.com/UYCV1mi.png
我试过使用 position: absolute，但我知道它不应该与 bootstrap 一起使用(我不太确定...)。有什么办法可以修复我的布局吗？
谢谢!
最佳答案
这是一个使用 bootstrap grid 的例子.
演示:jsfiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="col-sm-6" id="standleft">
<img src="http://www.fusionkatz.com/Assets/Jerome%201.jpg" alt="" >
</div>
<div class="col-sm-6" id="standright">
<img src="http://www.koreanfilm.org/tom/wp-content/uploads/dancing-cat2.jpg" alt="">
</div>
</div>
<div class="col-md-6">
<h2>lorem ipsum lorem ipsum</h2>
<p >lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>
</div>
</div>
</div>
关于html - 图像重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32554321/