将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获取上一个同级元素的宽度。

提前感谢任何建议。

- user1278456

---

div是一个块级元素，它们会自动继承其父元素的宽度。请查看此链接http://jsfiddle.net/qG7b8/。 - sandeep

感谢您的评论。 我已经给包装器div设置了display:inline属性，这意味着它将采用其最宽的子元素的宽度。 现在我需要的是第二个子div采用第一个子div的宽度。 - user1278456

@sandeep 我不想让包装 div 占据整个屏幕。我希望它的宽度与其最宽的子元素一样宽。希望这样说得清楚。 - user1278456

这是您放入fiddle的结构。 - sandeep

实际上，在CSS中您不需要任何显示...使用width:auto代替即可！ - Chris

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>

- Peter Josling

---

不错的解决方案。我本来希望在较大的div周围不要再加一个额外的div（并且只使用纯CSS完成），但现在我会暂时接受这个解决方案。幸运的是，在我的情况下，我甚至不需要父级.wrapper div。我没有仔细研究为什么，但认为值得一提。 - Daniel Waltrip

无法在Edge V44.17763.771.0上工作，奇怪的是，相同的解决方案在IE 11.805上运行良好。 - Harsh kurra

嗨@Peter，如果在.child下有多个div，则子div根据其内容进行拉伸，而不是具有兄弟的宽度。请检查以下链接的示例-https://jsfiddle.net/eotfy6w8/1/。请告诉我如何修复代码，以便所有子div都具有与其兄弟相同的宽度。 - Sravan Kumar

改进：.child div 应该包含 wordWrap: 'break-word'。否则，非常长的单词将会溢出。 - DarkTrick

终-于-成-功。我找了几个小时了，一直对自己很失望。“这应该很简单啊，但为什么我就是搞不定呢？”非常感谢你！ - Tom

Answer 2

浮动和表格已经过时了。有了现今的浏览器，我们可以使两个兄弟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>

- pilau

---

但是，如果你不想让第二个子元素决定宽度（且其长度大于第一个子元素），这种方法行不通。第一个子元素的宽度将变得与第二个子元素一样宽。 - Skitterm

@Skitterm 是的，但问题是这样描述的：“我需要底部元素的宽度与前一个兄弟元素相同”。 - pilau

@pilau 是的。正如skitterm所述，如果底部子元素的内容比前面的兄弟元素更大，则此解决方案将不起作用。你知道的。如果没有写“Child #2”。这可能是一个罕见的情况，但是你知道，在现实世界的场景中，你不会在内容中写太多的Child#2。我的意思是这不是很明显吗？ - Toskan

小改进：如果您在.parent中使用display: inline-flex而不是flex，则可以保存.wrapper div。 - Akronix

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>

- maxshuty

---

这不会使底部div与顶部兄弟元素的宽度匹配，它只是给父容器的两个div平均分配空间。每个div始终都是父容器宽度的50%。它们不会根据动态内容调整和匹配。 - TinyTiger

到重点！如果你正在使用像 "display:flex; flex-direction:column;" 这样的东西，你可以使用："grid-template-rows: repeat(1, 1fr);" - Omar Trkzi

Answer 4

将你的div设置为display:inline-block，这样你的div将随着其内部内容的扩展而扩展。 http://jsfiddle.net/CpKDX/

- Andres Ilich

---

在上面的例子中，我希望第二个子div元素可以继承第一个子div元素的宽度，也就是它的前一个兄弟节点。 - user1278456

@user1278456，你可以将容器div设置为display:inline-block而不是display:inline，这样你就可以得到这些结果，http://jsfiddle.net/CpKDX/6/。 - Andres Ilich

那并没有给我想要的结果。我想要的是底部div获取上方div的高度，而在上面的代码示例中它并没有做到。 - user1278456

@user1278456 啊，我刚明白你的问题了，试试这个：http://jsfiddle.net/CpKDX/7/ .. 使用通用兄弟选择器，你可以将样式应用于第一个后面的 div。 - Andres Ilich

Answer 5

这里还有一种基于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>

- keep

---

非常好的回答！如果我可以补充一下，两个包装器 div 元素也可以被替换为 span 元素（如果 DOM 被块级元素过载），只要最外层的 span 具有定义为 "inline-block" 的显示样式。 - leonidos79

Answer 6

你可以尝试在第二个 div 上使用 { width: min-content; min-width: 100%;}，并在父 div 上使用 {display: inline-block}。

- danny roshan

---

如果您有新的问题，请通过单击提问按钮来提出。如果它有助于提供上下文，请包含此问题的链接。- 来自审核 - user20384561

Answer 7

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

<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 的最大宽度为 980 像素（否则可以省略或替换为 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... 或者你可以为动态 div 使用 style="width:auto;"。

- Chris

---

啊，恐怕这样也无法产生期望的效果。 - user1278456

因为它是母元素的100％，对吧？如果这不是你想要的，请在两个内部div上使用width:auto.. 这符合你的需求吗？ - Chris

@user1278456: 我刚刚更新了，对我来说可以用...请让我知道它是否是你正在寻找的东西 :) - Chris

Answer 8

不确定我是否理解您想要做什么，但似乎将最后一个 div 设置为 100% 的宽度应该可以解决：

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

顺便提一下，第一个 div 中的样式定义不太规范，应该在属性定义中使用冒号而不是等号：

<div style="display:inline;">

- arraintxo

---

不需要定义width:100%，因为div是块级元素，它会自动获取宽度。 - sandeep

这将强制包装 div 占据整个屏幕，而不是将子 div 设置为包装 div 的 100%...没错 ;) 发现得好。 - user1278456

在花费了很多时间研究CSS后，我决定节省一些时间并使用表格。半分钟内完成工作。http://jsfiddle.net/XdLku/1/ 现在不要同时尖叫和喊叫！感谢各位的贡献。 - user1278456

Answer 9

如果你愿意放弃一些

，那么我有解决方案：

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

- Andreas Niebuhr