将 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

不确定我是否理解您要执行的操作，但看起来为最后一个 div 设置 100% 宽度应该可以：

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

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

<div style="display:inline;">

Answer 2

将您的 div 设置为 display:inline-block，这样您的 div 将随着其中的内容展开。

http://jsfiddle.net/CpKDX/

Answer 3

更新：这对我有用，我刚刚尝试过：

<div style="max-width:980px;border:1px solid red;">
   <div style="background:#EEE;float:left;">
     <div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
     <div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
   </div>
     <div style="clear:both;"></div>
</div>

这是你想要的吗？边框和背景只是为了显示 div ;)

---

就这样吧：

假设您希望整个 div 最大。 980px（否则就忽略它或用 100% 替换）...

<div style="max-width:980px;">
     <div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
     </div>
     <div style="width:100%;"> The div will be 100% of the mother div too.
     </div>
</div>

第二种选择是，多使用一个 div... 或者您使用 style="width:auto;" 作为动态 div...

Answer 4

花车和桌子太晚了 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 5

如果您愿意放弃几个<div>s，那么我有适合您的解决方案：

<div style=“display: inline-block;”>
  <table>
    <tr>
      <td>The table automatically makes its siblings the same width</td>
    </tr>
    <tr>
      <td>So this will be as wide</td>
    </tr>
  </table>
</div>

记得设置div display:inline-block;

Answer 6

这是另一个 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>

编辑：

若要支持.child 下的多个divs，其中每个div 独占一行，请添加break-after: always; ...

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

Answer 7

这里仍然是基于 flexbox 的方法。

基本思想：在最外层的包装器中，需要等宽的元素被包装到另一个包装器中。

.wrapper {
  display: inline-block;
}

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

.demo-bar {
  height: 4px;
  background-color: deepskyblue;
}

<div class="wrapper">
  <div class="flex-wrapper">
    <div contenteditable>Some editable text.</div>
    <div class="demo-bar"></div>
  </div>
</div>

另一个实际示例：在媒体（视频或音频）元素下方具有相同宽度的自适应进度条。

video.addEventListener("timeupdate", () =>
  progress.style.width = `${video.currentTime / video.duration * 100}%`
)

.wrapper {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
}

video {
  display: block;
  max-width: 100%;
}

.progress-bar {
  height: 0.25rem;
  background: #555;
}

#progress {
  width: 0%;
  height: 100%;
  background-color: #595;
}

<div class="wrapper">
  <div data-css-role="wrapper">
    <video id="video" controls>
      <source src="https://raw.githubusercontent.com/mdn/interactive-examples/master/live-examples/media/cc0-videos/flower.webm">
    </video>
    <div class="progress-bar">
      <div id="progress"></div>
    </div>
  </div>
</div>

Answer 8

2021 保持简单...

使用grid 和fractional 单元？然后，您可以根据需要拆分为多个相同大小的行或列：

.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>