Question

我想将两个div元素与flexbox并排放置。

在我的div元素中，我有一个label，其位置为absolute，并且有一个span。我的问题是，如果div的宽度比跨度大，则label元素的宽度不等于label的整个宽度。如何确保div元素占据其子元素的整个宽度？

最小示例： http://jsfiddle.net/khbg9w50/2/

#flex-container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  width: auto;
  background-color: rgba(0, 255, 0, 0.4);
}

.label {
  position: absolute;
  top: 0;
  font-size: 10px;
  background-color: rgba(255, 0, 0, 0.4);
}

<div id="flex-container">
  <div class="container">
    <label class="label">A Very, Very Long Labeltext</label>
    <span>Example 1</span>
  </div>
  <div class="container">
    <label class="label">A Very, Very Long Labeltext</label>
    <span>Example 2</span>
  </div>
</div>https://stackoverflow.com/posts/55665051/edit#

谢谢！

Answer 1

绝对定位的元素位于常规页面流之外，这意味着，如果子元素具有绝对值，则父元素的行为就好像子元素根本不在那里。

我认为没有理由在示例代码中使用position:absolute。只需制作标签display:block。或者，如果您需要标签保持其自然宽度，请改成span {display:block;}。

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.container {
  width: auto;
  background-color: rgba(0, 255, 0, 0.4);
}

.container label {
  /* display:block; */
  font-size: 10px;
  background-color: rgba(255, 0, 0, 0.4);
}
.container span {
  display:block;
}

<div class="flex-container">
  <div class="container">
    <label>A Very, Very Long Labeltext</label>
    <span>Example 1</span>
  </div>
  <div class="container">
    <label>A Very, Very Long Labeltext</label>
    <span>Example 2</span>
  </div>
  <div class="container">
    <label>A short one</label>
    <span>Example 3</span>
  </div>
</div>

PS。 id must be unique.

更新

我现在意识到，您可能不希望所有标签都是全角（例如，对于短标签。如果是这种情况，将span设置为显示将更有意义：而不是标签。我已经相应更新了答案。

迪夫没有采取孩子的全宽

1 个答案: