Question

如果有可能，我想避免绝对定位...... 我有以下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%;
    }
}

到目前为止，你可以在我的小提琴中看到：http://jsfiddle.net/zgobmdL2/在两个（普通和媒体）屏幕上，两个图像是一个在另一个之上。我希望图片实际上重叠另一个，例如：http://i.imgur.com/OqU5nJa.png，如果是移动浏览，就像这里： http://i.imgur.com/UYCV1mi.png

我尝试使用position: absolute，但我知道它不应该与bootstrap一起使用（我不完全确定......）。有没有办法修复我的布局？谢谢！

Answer 1

以下是使用bootstrap grid的示例。

DEMO ：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>

图像与另一个重叠

1 个答案: