将div设置为其兄弟宽度

Question

我正在寻找以下的CSS解决方案: -

<div style="display:inline;">
     <div>The content of this div is dynamically created but will always be wider than
              the below div. 
     </div>
     <div> Need this div to have the same width as the above div.
     </div>
</div>

包装器div具有内联显示并按预期工作,两个子div都具有动态生成的内容.我需要底部采取前一个兄弟的宽度.

非常感谢您提前提出的任何建议.

Answer 1

这是另一个Flexbox解决方案,它允许第二个子包装以匹配可变高度兄弟的宽度.

.wrapper > div {
  border: 1px solid;
}

.child {
  display: flex;
}

.child div {
  flex-grow: 1;
  width: 0;
}

.wrapper {
  display: inline-block;
}

<div class="wrapper">
    <div>This div is dynamically sized based on its content</div>
    <div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>
</div>

Answer 2

花车和桌子是2000年和晚期.使用今天的浏览器,我们可以使两个兄弟DIV相互匹配,无论哪个更大/更小.

这是适合2016年的Flexbox解决方案:

.wrapper {
  display: inline-block;
}

.parent {
  display: flex;
  flex-direction: column;
}

/* For visualization */
.child {
  border: 1px solid #0EA2E8;
  margin: 2px;
  padding: 1px 5px;
}

<div class="wrapper">
  <div class="parent">
    <div class="child">Child number one</div>
    <div class="child">Child #2</div>
  </div>
</div>

Answer 3

2023年保持简单......

用途grid和fr单位。然后，您可以根据需要分成任意数量的相同大小的行或列：

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 1em;
}

.container > div {
  border: 1px solid black;
  padding: 0.5em;
}

<div class="container">
  <div>I'm a part of a grid. I will be split up into equal parts with my other sibling(s) depending on how many columns the grid is given.</div>
  <div>I am a sibling element.</div>
</div>

Answer 4

不确定我是否理解你想要做什么，但看起来为最后一个 div 设置 100% 宽度应该可行：

<div style="width:100%;"> 

顺便说一句，第一个 div 中的样式没有明确定义，您应该在属性定义中使用冒号而不是等号：

<div style="display:inline;">