Question

我似乎总是在Web开发中遇到的一件事是将事情保留在div元素中。我经常遇到这样的问题：我有一个包含更多div和内容的div包装器列表，最终，其中一个渗出并导致样式设计方面的噩梦。我可以举一个例子。

如果您检查元素，您会发现banner-content div不会包装所有内容。图像和跨度元素超出其范围，即使icon-wrapper内容也（再次）环绕所有内容。我相信我知道该答案的答案（img高度设置为100％）。

现在似乎不是什么大问题，但是当尝试将内容与更多内容和形式以及响应式设计保持一致时，这有点疯狂。几乎感觉就像我在添加一些hacky代码以使它们都很好地组合在一起。实际上，似乎一切都在我父div的大小和元素之内，一切都会按预期运行。

是否有一种方法可以强制divs将所有子节点包含在其范围之内？

.wrapper {
  width:100%;
  display:flex;
  flex-direction:column;
}
.cool-banner {
  display:flex;
  height:60vh;
}
.banner-picture {
  width:50%;
}
.banner-picture img {
  object-fit: none;
  object-position: center;
  height: 100%;
  width: 100%;
}
.banner-content {
  display:flex;
  flex-direction: column;
  height:100%;
}
.icon-list {
 display:flex;
}
.icon-wrapper {
display:flex;
flex-direction:column;
height:40vh;
}
.icon-wrapper img {
  object-fit: contain;
  object-position:center;
  width:100%;
  height:100%;
}

<div class="wrapper">
  <div class="cool-banner">
     <div class="banner-picture">
      <img src="https://cdn.shopify.com/s/files/1/1150/2512/files/WG_Grill_ShootBeside_Oct2017-7_dd4f32ad-38ac-4a49-8a3c-332ba067835e_810x540.jpg?v=1553613536"/>
     </div>
     <div class="banner-content">
      <h1>I'm Content</h1>
      <div class="icon-list">
        <div class="icon-wrapper">
          <img src="https://cdn.shopify.com/s/files/1/1150/2512/t/41/assets/fire-silver.png?51152"/>
          <span>Nice Fire</span>
        </div>
        <div class="icon-wrapper">
          <img src="https://cdn.shopify.com/s/files/1/1150/2512/files/EPDA-Logo-small_x100-ConvertImage_small.png?v=1559164248"/>
          <span>Nice Award</span>
        </div>
     </div>
  </div>
</div>

Answer 1

如果我理解这个问题，可以通过多种方法来约束孩子，使他们不会超出父母的范围。

如果在父级上设置overflow: hidden，则比父级宽或高的子级将在父级边缘处进行裁剪，尽管它们的宽度将保持不变。

您可以在孩子上设置max-width: 100%，以防止他们变得比父母的宽度还要宽。

您还可以在父级上设置display: flex，在子级上设置min-width: 0，以将子级约束为父级。

如果您需要限制身高，事情会变得有些困难，因为如果明确设置了父母的身高，孩子通常只会尊重父母的身高。

Answer 2

有时候，您不能将10英尺的尺码放到7号鞋中。

该图像占据了50％的空间，而没有足够的空间容纳另一列的内容。恰当的例子-在您的示例中，删除flex-direction：.banner-content列会按您的预期包装所有子对象

强制元素始终位于DIV中

2 个答案: