html – 设置div以使其兄弟的宽度

前端之家收集整理的这篇文章主要介绍了html – 设置div以使其兄弟的宽度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在寻找一个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都具有动态生成内容.我需要底部的宽度以前的兄弟姐妹.

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

解决方法

@H_502_11@ 浮动和桌子是如此2000年和晚.随着今天的浏览器,我们可以使两个兄弟DIVs匹配对方的宽度,无论哪个更大/更小.

以下是适用于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>

猜你在找的HTML相关文章