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

将div设置为display:inline-block，这样你的div就会随着内容的扩展而扩展。

http://jsfiddle.net/CpKDX/

Answer 4

2020保持简单...

使用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 5

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

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

如果您愿意放弃几个<div>，那么我会为您提供解决方案：

<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 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://interactive-examples.mdn.mozilla.net/media/examples/flower.webm">
    </video>
    <div class="progress-bar">
      <div id="progress"></div>
    </div>
  </div>
</div>

Answer 8

不确定我是否理解你要做什么，但看起来设置100％宽度到最后一个div应该有效：

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

BTW第一个div中的样式定义不明确，你应该在属性定义中使用冒号而不是等号：

<div style="display:inline;">

将div设置为其兄弟宽度

8 个答案:

2020保持简单...