时间戳

首页 > 解决方案 > CSS HTML

窗口大小调整问题

html - CSS HTML
窗口大小调整问题

问题描述

当我调整窗口大小时，我需要最后两个 div 位于前两个之下。它这样做了，但是第三个 div 在右边，而第四个 div 在左边，在第三个下面。我似乎找不到原因。像这样：

DIV1  DIV2

      DIV3
DIV4

调整大小后，我希望它们看起来像这样：

DIV1  DIV2

DIV3  DIV4

欢迎任何帮助。

谢谢！

HTML：

 <div class="section4a">
        <div class="list">
            <p class="header">South Asia</p>
            <p class="country">
                Bangladesh <br>
                Maldives <br>
                Pakistan <br>
                Nepal <br>
                Bhutan <br>
                India
            </p>
        </div>
        <div class="list">
            <p class="header">South Asia</p>
            <p class="country">
                Panama <br>
                Nicaragua <br>
                Bahamas <br>
                Canada <br>
                Mexico
            </p>
        </div>
        <div class="list">
            <p class="header">Middle East</p>
            <p class="country">
                Bahrain <br>
                Cyprus <br>
                Egypt <br>
                Iran <br>
                Jordan <br>
                Kuwait
            </p>
        </div>
        <div class="list">
            <p class="header">South America</p>
            <p class="country">
              Guyana <br>
              Paraguay <br>
              Colombia <br>
              Bolivia <br>
              Brazil
          </p>
      </div>
  </div>

CSS：

.section4a {
    margin-left: 13%;
    margin-top: 155px;
    width: 100%;
}

.section4a .list {
    float: left;
    margin-right: 12%;
}

.section4a .list:after {
  content: "";
  display: table;
  clear: both;
}

标签： htmlcss

解决方案

我会在你的部分元素上使用 display: flex，在列表元素上使用 max-width 。通过这种方式，它可以响应所有屏幕尺寸。而且你也不再需要那种清晰的花车了:)

.section4a {
  margin-left: 13%;
  margin-top: 155px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.section4a .list {
  min-width: 300px;
}

推荐阅读