我正在寻找一个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都具有动态生成的内容.我需要底部的宽度以前的兄弟姐妹.
非常感谢提前提出的任何建议.
解决方法
浮动和桌子是如此2000年和晚.随着今天的浏览器,我们可以使两个兄弟DIVs匹配对方的宽度,无论哪个更大/更小.
- .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>
