Question

我定义了容器显示的flexbox属性：flex; flex-wrap：包装;证明内容：中心；但第一行总有3个div，第二行总有2个div。当浏览器调整大小时，如何包装div？

我几乎尝试了所有方法（更改了父容器的宽度和高度，将宽度更改为min-width / max-width，设置了父容器的margin：0 auto;）。

<!-- HTML -->
<div class="parent">
  <div class="headline">
    <h2>Tea of the Month</h2>
    <h4>What's Stepping at The Tea Cozy?</h4>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Fall Berry Blitz Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Spiced Rum Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Seasonal Donuts</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Myrtle Ave Tea</p>
  </div>
  </div>
  <div class="container">
    <img src="..." class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
</div>
<!-- URL of images is correct -->

/* CSS */
.parent {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto;
}
.headline {
display: block;
width: 100%;
}
.container {
margin: 0px 10px;
}
.image {
width: 300px;
height: 200px;
}

我希望div会在下一行显示。但是第一行总有3个div，第二行总有2个div。

Answer 1

发生这种情况是因为您在tapply上设置了width：1000px。这意味着无论设备大小如何，父项始终为1000px，第一行中始终会有3个元素。

要解决此问题，请设置.parent {width：100％;最大宽度：1000像素；}

欢呼

Answer 2

您的HTML包含一些无效的结束标记，请验证您的HTML，以便检出：https://validator.w3.org/

还删除了1000px的固定宽度，您希望拥有一个流畅的父级，以便根据设备或浏览器的宽度调整大小。

/* CSS */

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  /* changed */
  width: 100%;
}

.headline {
  display: block;
  width: 100%;
}

.container {
  margin: 0px 10px;
}

.image {
  width: 300px;
  height: 200px;
}

<!-- HTML -->
<div class="parent">
  <div class="headline">
    <h2>Tea of the Month</h2>
    <h4>What's Stepping at The Tea Cozy?</h4>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Fall Berry Blitz Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Spiced Rum Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Seasonal Donuts</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Myrtle Ave Tea</p>
  </div>
  <!-- </div> REMOVED -->
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
  <div class="container">
    <img src="https://placehold.it/300x300" class="image">
    <p>Bedford Bizarre Tea</p>
  </div>
</div>

Div元素不会在下一行换行

2 个答案: