如何让浮动DIV填充其父DIV中的可用空间？

要让浮动的 div 填充其父 div 中的可用空间，您可以使用以下方法：

在子 div 的 CSS 中，设置宽度为 calc(100% - 20px)，其中 20px 是父 div 的内边距。

示例代码：

<style>

   .parent {

       padding: 10px;

       border: 1px solid black;

   .child {

       float: left;

       width: calc(100% - 20px);

       background-color: lightblue;

</style>

   <div class="child">

       这是一个浮动的 div，宽度填充了父 div 中的可用空间。

   </div>

</div>

将子 div 的 box-sizing 属性设置为 border-box，这样宽度会包括内边距和边框。

示例代码：

<style>

   .parent {

       padding: 10px;

       border: 1px solid black;

   .child {

       float: left;

       width: 100%;

       box-sizing: border-box;

       background-color: lightblue;

</style>

   <div class="child">

       这是一个浮动的 div，宽度填充了父 div 中的可用空间。

   </div>

</div>

这两种方法都可以使浮动的 div 填充其父 div 中的可用空间。您可以根据您的需求选择合适的方法。

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云