Question

此右侧的灰色块（https://jsfiddle.net/var6u4g7/）不会占据其内容的全部宽度。它使用的是righttext的大小，如果您在righttext元素中添加了更多单词，则会看到灰色框正好占据了该宽度。我不想分配固定的宽度，因为我不知道里面会有多少，所以我希望它的宽度与内容一样宽。

如果您删除第一个元素上的display: flex，则宽度起作用，但其他情况坏了。（如果您删除灰色框，则会看到为什么我需要display: flex。灰色框仅有时显示，并且当不存在时，该行中的所有内容都应垂直居中对齐。有没有一种方法可以使这项工作？

.container {
  display: flex;
  align-items: center;
  background-color: yellow;
}

.leftside {
  margin-right: auto;
}

.rightside {
  position: relative;
}

.righttext {
  background-color: red;
  margin-top: 10px;
  margin-bottom: 10px;
}

.absolute {
  position: absolute;
  right: 0;
  top: 0;
  background-color: gray;
}

<div class="container">
  <div class="leftside">Lorem ipsum dolor sit amet.</div>
  <div class="rightside">
    <div class="righttext">
      Lorem ipsum.
    </div>
    <div class="absolute">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </div>
</div>

Answer 1

目前尚不清楚您要查找的内容是什么，但是如果我正确理解的话，您希望红色和灰色框为全角。您可以通过将flex: 1添加到.rightside并将width: 100%;添加到.absolute来实现。 flex属性指示某个元素应具有优先级。这是flex-grow: 1的简写。

HTML元素未在绝对位置和flexbox内部占据其全部宽度

1 个答案: