Question

我刚开始学习HTML和CSS，并且无法确定如何包含水平空间来分隔两行，并修复错位/大小调整问题。这两行当前都连在一起，当我删除<div class="row" style="padding-top: 50px">时，错位是固定的，但行仍在一起。

任何人都可以帮助我吗？

HTML：

    <div id="featuredcities">
      <div class="col-sm-3">
        <img id="image" src="images/singapore.jpg" alt="singapore">
        <a href="#"><p id="text">Singapore</p></a>
        <p id="summarytext">Amazing culinary experience and <br>efficient business ecosystem in this <br>tiny cosmopolitan country.</p>
      </div>
      <div class="col-sm-3">
        <img id="image" src="images/bangkok.jpg" alt="bangkok">
        <a href="#"><p id="text">Bangkok</p></a>
        <p id="summarytext">A bustling neon-lit city that combines tradition and modernity.</p>
      </div>
      <div class="col-sm-3">
        <img id="image" src="images/shanghai.jpg" alt="shanghai">
        <a href="#"><p id="text">Shanghai</p></a>
        <p id="summarytext">Blend of East meets West <br>in this high energy metropolis.</p>
      </div>
      <div class="col-sm-3">
        <img id="image" src="images/hcmc.jpg" alt="ho chi minh city">
        <a href="#"><p id="text">HCMC</p></a>
        <p id="summarytext">The "Paris of Asia", Ho Chi Minh City is <br>as much historical as it is modern.</p>
      </div>
    </div><!--End of 1st div row-->

    <!--2nd div row-->
    <div class="row" style="padding-top: 50px">
      <div class="col-sm-3">
        <img id="image" src="images/seoul.jpg"  alt="seoul">
        <a href="#"><p id="text">Seoul</p></a>
        <p id="summarytext">Famous for pop culture, <br>vibrant shopping and <br>historical palaces.</p>
      </div>
      <div class="col-sm-3">
        <img id="image" src="images/bangkok.jpg" alt="bangkok">
        <a href="#"><p id="text">Bangkok</p></a>
        <p id="summarytext">A bustling neon-lit city that combines tradition and modernity.</p>
      </div>
      <div class="col-sm-3">
        <img id="image" src="images/shanghai.jpg" alt="shanghai">
        <a href="#"><p id="text">Shanghai</p></a>
        <p id="summarytext">Blend of East meets West <br>in this high energy metropolis.</p>
      </div>
      <div class="col-sm-3">
        <img id="image" src="images/hcmc.jpg" alt="ho chi minh city">
        <a href="#"><p id="text">HCMC</p></a>
        <p id="summarytext">The "Paris of Asia", Ho Chi Minh City is <br>as much historical as it is modern.</p>
      </div>
    </div><!--End of 1st div row-->

  </div><!--End of Community-->   
</section>

CSS：

#images .col-md-3 {
  height: 570px;
  overflow: hidden;
}

Answer 1

你的第一个div有这个HTML

<div id="featuredcities">

将类row添加到其中。

<div class="row" id="featuredcities">

Answer 2

str.charAt(j)

总是尽量保持你的代码清洁..我建议你学习真正好的自举网格系统Bootstrap-grid

编辑：您的图片ID是“图片”，在您的CSS中，您正在调用“#images”...？

Answer 3

您可以将其从padding-top更改为margin-top，也可以在两个div之间添加一个
标签。

无法分隔2个div行

3 个答案: