Question

我有一个简单的DIV容器，其中包含2个div子元素。我希望第一个元素设置父容器的宽度，第二个元素以适应可用宽度。
我有一个简单的JSFiddle来展示我的尝试。我希望红色元素的宽度与蓝色元素的宽度匹配。

<div class="container">
  <div class="first">
    first element
  </div>
  <div class="second">
    second element with more characters
  </div>
</div>

也许不同的布局可以帮助我获得想要的东西，或者一些特定的CSS技巧。我对可能会起作用的一切感到满意。

Answer 1

样式已添加到父元素display: table;

在第二个子元素上添加display: table-caption;和caption-side: bottom;，以使其不位于第一个位置。

不必在第一个子元素中添加样式，但是我已经将其添加到display: inline;

希望我能对您有所帮助

.container {
    background-color: green;
    display: table;
}

.first {
    background-color: blue;
    display: inline;
}

.second {
    background-color: red;
    display: table-caption;
    caption-side: bottom;
}

<div class="container">
    <div class="first">
        first element dfsf fd ssdf g
    </div>
    <div class="second">
        second element with more characters
    </div>
</div>

Answer 2

是的，您有可能将该行添加到no-gutters类中，并将col-div放入另一个p-0类中，我想您将解决此问题。

或您的第一个孩子div添加新的类p-0和无装订线谢谢

如何使HTML容器适合单个子元素的宽度，同时限制另一个子元素的宽度？

2 个答案: