html - div 大小调整将相邻的 div 推到错误的位置

Question

我正在尝试找出解决此问题的最佳方法。有 4 个 div，当您缩小浏览器窗口时，第 3 个 div 出现在右侧，第 4 个 div 出现在下方。我知道这是因为第一个 div 有更多的文本，而自动高度意味着高度比旁边的其他 div 大。我不想给它一个固定的高度。清除第 3 个 div 上的 float 会将第 3 个 div 放在正确的位置，但第 4 个 div 则位于第 3 个 div 的下方。

当缩小浏览器窗口时，如何让第 3 个和第 4 个 div 并排放置？有没有一种简单的方法可以使第一个和第二个 div 具有相同的高度，即使每个 div 中的内容不同？

感谢您的帮助!

.thing {
  width: 50%;
  height: auto;
  background-color: pink;
  box-sizing: border-box;
  border: 1px solid red;
  display: block;
  float: left;
}
.title {
  display: block;
}
a {
  display: block;
}

<div class="thing">
  <span class='title'>the excess text here causes the problem as the height is increased</span>
  <a href='#'>News</a>
  <a href='#'>Audacity</a>
  <a href='#'>Thisisalongerword</a>
</div>

<div class="thing">
  <span class='title'>title two</span>
  <a href='#'>News</a>
  <a href='#'>Audacity</a>
  <a href='#'>Thisisalongerword</a>
</div>

<div class="thing thingy">
  <span class='title'>title three</span>
  <a href='#'>News</a>
  <a href='#'>Audacity</a>
  <a href='#'>Thisisalongerword</a>
</div>

<div class="thing">
  <span class='title'>title four</span>
  <a href='#'>News</a>
  <a href='#'>Audacity</a>
  <a href='#'>Thisisalongerword</a>
</div>

Answer 1

您可以在第三个 DIV 上使用 clear:both:

.thing {
  width: 50%;
  height: auto;
  background-color: pink;
  box-sizing: border-box;
  border: 1px solid red;
  display: block;
  float: left;
}
.title {
  display: block;
}
a {
  display: block;
}
.thing.thingy {
  clear: both;
}

<div class="thing">
  <span class='title'>the excess text here causes the problem as the height is increased</span>
  <a href='#'>News</a>
  <a href='#'>Audacity</a>
  <a href='#'>Thisisalongerword</a>
</div>

<div class="thing">
  <span class='title'>title two</span>
  <a href='#'>News</a>
  <a href='#'>Audacity</a>
  <a href='#'>Thisisalongerword</a>
</div>

<div class="thing thingy">
  <span class='title'>title three</span>
  <a href='#'>News</a>
  <a href='#'>Audacity</a>
  <a href='#'>Thisisalongerword</a>
</div>

<div class="thing">
  <span class='title'>title four</span>
  <a href='#'>News</a>
  <a href='#'>Audacity</a>
  <a href='#'>Thisisalongerword</a>
</div>

关于第二个问题:您可以使用 flex 来实现:将容器包裹在所有东西周围并应用 display: flex; 和 flex-wrap: wrap; 到它:

.thing {
  width: 50%;
  height: auto;
  background-color: pink;
  box-sizing: border-box;
  border: 1px solid red;
  display: block;
}

.title {
  display: block;
}

a {
  display: block;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
}

<div class="wrap">
  <div class="thing">
    <span class='title'>the excess text here causes the problem as the height is increased</span>
    <a href='#'>News</a>
    <a href='#'>Audacity</a>
    <a href='#'>Thisisalongerword</a>
  </div>

  <div class="thing">
    <span class='title'>title two</span>
    <a href='#'>News</a>
    <a href='#'>Audacity</a>
    <a href='#'>Thisisalongerword</a>
  </div>

  <div class="thing thingy">
    <span class='title'>title three</span>
    <a href='#'>News</a>
    <a href='#'>Audacity</a>
    <a href='#'>Thisisalongerword</a>
  </div>

  <div class="thing">
    <span class='title'>title four</span>
    <a href='#'>News</a>
    <a href='#'>Audacity</a>
    <a href='#'>Thisisalongerword</a>
  </div>
</div>