javascript - 为什么我的响应式图片不起作用？

Question

我仍在学习 CSS，不明白为什么我无法让该图像在我的模板中做出响应式行为。

它最初是一个背景图像，我决定用普通图像替换，当最大化时，我希望文本位于图像的右侧(没有重叠)，当响应时，我希望图像位于文本上方.

它似乎只是重叠，谁能告诉我我的 CSS 中错过了什么？

<!-- IMAGE CONTAINER SECTION 1 -->
<section class="image-container-section-1 gry-bg">

    <!-- IMAGE CONTAINER  -->
    <div class="image-container-5"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT5MOpet1ps36ZgsQ98y7O8sJX4vIevqmvMJmr3F1zZRq9n_RYXaQ"/></div>

    <div class="container">
        <div class="row">
            <div class="col-md-6"></div>
            <div class="col-md-6 col-sm-12">

                <!-- TEXT CONTAINER  -->
                <div class="image-container-1-text">
                    <h3 class=" slideInUp">Dummy Text</h3>
                    <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
                    <a class=" " href="">learn more</a>
                </div>

            </div>
        </div>
  </div>

https://jsfiddle.net/6kyomgsv/3/

Answer 1

如果我理解正确的话，您希望将内容分成两列。在较小的设备上，您希望将列堆叠起来。看来您正在尝试使用 Bootstrap 来做到这一点。但该库尚未加载到 Fiddle 中。我已经更新了 fiddle 以包含必要的 CSS(在外部资源下)https://jsfiddle.net/6kyomgsv/12/

然后我们可以使用内置的类来获得所需的布局。您已经准备好 HTML 来执行此操作。您还可以删除图像定位 CSS 并将图像向下移动几行。

<!-- IMAGE CONTAINER SECTION 1 -->
<section class="image-container-section-1 gry-bg">

  <!-- IMAGE CONTAINER  -->
  <div class="image-container-5"></div>

  <div class="container">
    <div class="row">
      <div class="col-md-6"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT5MOpet1ps36ZgsQ98y7O8sJX4vIevqmvMJmr3F1zZRq9n_RYXaQ" class="img-responsive" /></div>
      <div class="col-md-6 col-sm-12">

        <!-- TEXT CONTAINER  -->
        <div class="image-container-1-text">
          <h3 class=" slideInUp">Dummy Text</h3>
          <p class="">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            It has survived not only five centuries,</p>
          <a class=" " href="">learn more</a>
        </div>

      </div>
    </div>
  </div>
</section>
<!-- END IMAGE SECTION 1 -->

.col-md-6 允许您将网格分成两半。在这种情况下，.col-md 将保持这种状态，直到宽度低于 970px，然后它将堆叠在一起。如果您想在较小的设备上添加其他布局选项，则可以添加其他引导类。查看Bootstrap Docs for a nice graph .

我还在您的图像中添加了 img-responsive 的引导类。这允许图像本身采用其容器的宽度。如果是较大的图像，我通常会添加它。但如果我不希望它调整大小并且已经计划让它在移动设备上看起来很好，我可能会选择不这样做。