将div设置为具有其兄弟宽度 [英] Set div to have its siblings width

问题描述

我正在寻找一个CSS解决方案以下内容： -

 < div style =display：inline;> < div>此div的内容是动态创建的，但始终会比下面的div宽。 < / DIV> < DIV>需要这个div与上面的div具有相同的宽度。 < / div>< / div>  

code> div 具有行内显示并且按预期工作，两个子div都具有动态生成的内容。我需要底部的一个来获取前一个兄弟的宽度。

非常感谢任何建议。

解决方案

浮动和表格都是2000年和迟到的。在今天的浏览器中，我们可以让两个兄弟DIV匹配彼此的宽度，而不管哪个更大/更小。

以下是适用于2016年的Flexbox解决方案：

.wrapper {display：inline -block;}。parent {display：flex; flex-direction：column;} / *用于可视化* /。child {border：1px solid＃0EA2E8; margin：2px; padding：1px 5px;}

< div class =包装> < div class =parent> < div class =child>儿童号码< / div> < div class =child> Child＃2< / div> < / div>< / div>

I'm looking for a CSS solution to the following:-

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

The wrapper div has an inline display and works as expected, both child divs have dynamically generated content. I need the bottom one to take the width of the previous sibling.

Many thanks for any suggestions in advance.

解决方案

Floats and tables are so 2000 and late. With today's browsers we can make the two sibling DIVs match each other's width, regardless which is bigger/smaller.

Here's a Flexbox solution fit for 2016:

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

这篇关于将div设置为具有其兄弟宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！