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

【问题标题】：How to get a floating-DIV to fill available space within its parent DIV?如何让浮动 DIV 填充其父 DIV 中的可用空间？
【发布时间】：2020-01-22 18:31:44
【问题描述】：

如何获得正确的浮动 DIV 来填充其可用空间？

        .content{
            background-color: #fff;
            margin: 0px auto;
            width: 760px;
            border: 1px solid blue;
            font-size: 10pt;
        }

        .content .leftSide {
            background-color: yellow;
            float: left;
            padding: 5px;
        }

        .content .rightSide {
            background-color: orange;
            float: left;
            width: *;
            padding: 5px;
            text-align: center;
        }

<div class="content">

        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
        <div style="clear:both"></div>

</div>

<div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
        
</div>

中间答案：

感谢 Guffa 和 Rich，将 float:left 放在右侧允许文本居中，但要使背景颜色向下延伸，我还必须制作父 DIV 的背景颜色。

但是，我仍然无法让文本在中间垂直对齐，因为 DIV 实际上并没有一直向下，是否也有“自动”？例如高度：*，或浮动：自动？正如 Cletus 下面提到的，这在 HTML 表格中都是微不足道的，CSS 设计者肯定包含了一些属性来“使垂直空间向下填充”。

alt text http://tanguay.info/web/external/cssRightFixed.png

.content{
          background-color: orange;
          margin: 0px auto;
          width: 760px;
    			border: 1px solid blue;
    			font-size: 10pt;
    		}
    		
    		.content .leftSide {
    			background-color: yellow;
    			float: left;
    			padding: 5px;
    		}
    		
    		.content .rightSide {
    			background-color: orange;
    			padding: 5px;
    			text-align: center;
			    vertical-align: middle; 
   /* DOESN'T WORK SINCE THE DIV DOES
      NOT ACTUALLY GO ALL THE WAY DOWN */
    		}

<div class="content">
    		<div class="leftSide"><img src="test.jpg"/></div>
    		<div class="rightSide">Right side text should be centered.</div>
    		<div style="clear:both"></div>
    	</div>
    	<div class="content">
    		<div class="leftSide"><img src="test2.jpg"/></div>
    		<div class="rightSide">And the background should fill the DIV of course.</div>
    		<div style="clear:both"></div>
    	</div>
    	<div class="content">
    		<div class="leftSide"><img src="test3.jpg"/></div>
    		<div class="rightSide">And the background should fill the DIV of course.</div>
    		<div style="clear:both"></div>
    	</div>
    	<div class="content">
    		<div class="leftSide">this is a text on the left with no image</div>
    		<div class="rightSide">And the background should fill the DIV of course.</div>
    		<div style="clear:both"></div>
</div>

【问题讨论】：

标签： css

【解决方案1】：

如果你使用浮动，你几乎需要给它们宽度。如果您指定宽度，或者您对浏览器计算的最小所需宽度感到满意，则浮动很好。一旦您需要它们扩展以填充可用空间，您就不走运了。

事实上你使用了错误的工具。

所以你有两种可能：

修正浮动的大小；或
使用表格。

对于表格，这是一个需要解决的小问题（等待反对表格的纯 CSS 狂热者发疯）。

编辑：好的，你也想做垂直居中。现在你真的有麻烦了。请参阅Can you do this HTML layout without using tables?，了解使用纯 CSS 进行简单布局有多难，尤其是当您想要进行垂直居中（当容器或子项不是固定高度时）或并排内容时。

同样，表格使用vertical-align: middle 使这变得微不足道。

如果您想了解有关使用纯 CSS 进行垂直居中的更多信息，请参阅：

Vertical Centering in CSS: 三层嵌套的 div... 只是为了垂直居中；
How to: vertical centering with CSS;和
Vertical centering with CSS。

【讨论】：

谢谢，我的想法完全正确，我实际上在等待一个反表格的纯 CSS 狂热者来告诉我如何做到这一点，必须有一个相对无害的 CSS hack 来“居中文本” " 和 "提供背景颜色"。
arr，表格，arrr。不只是在开玩笑。始终尝试使用 div 和 css 定位。但是，如果这会使事情变得非常复杂，那就使用表格。
@Pim：这也是我使用的标准。
我不一定是一个反对表格的纯 css 狂热者，但您可以使用引导程序用来居中模式的相同方法轻松地居中父元素中的元素。您必须知道要居中的元素的尺寸，但不需要知道父元素的尺寸。 jsfiddle.net/JGSBJ/1
对于布局 div 是死路一条。使用表格，但不要过度使用。

【解决方案2】：

这应该做你想做的事。如果您还浮动左侧，则无需浮动右侧。让右手边正常，默认会填满可用空间。

 .content{
          background-color: orange;
          margin: 0px auto;
          width: 760px;
          border: 1px solid blue;
          font-size: 10pt;
          overflow: auto;
  }

  .content .leftSide {
          background-color: yellow;
          float: left;
          padding: 5px;
  }

  .content .rightSide {
          padding: 5px;
          text-align: center;
  }

<div class="content">
    <div class="leftSide"><img src="test.jpg"/></div>
    <div class="rightSide">Right side text should be centered.</div>
</div>
<div class="content">
    <div class="leftSide"><img src="test2.jpg"/></div>
    <div class="rightSide">And the background should fill the DIV of course.</div>
</div>

【讨论】：

【解决方案3】：

我倾向于同意“使用表格”的拥护者，但在搞砸了一段时间后（以一种不知道我在做什么的方式）我想出了这个解决垂直对齐问题的变体在 Firefox、Safari、Chrome 等中，在 IE 中也不会变得更糟。

（我的更改在缩进较少的行上）

<html>
<head>
    <style type="text/css">
        .content{
                background-color: orange;
                margin: 0px auto;
                width: 760px;
                border: 1px solid blue;
                font-size: 10pt;
            display:table;
        }

        .content .leftSide {
                background-color: yellow;
                float: left;
                padding: 5px;
        }

        .content .rightSide {
            border:1px solid black; /* for debugging */
            display:table-cell;
            width:100%;
                background-color: orange;
                padding: 5px;
                text-align: center;
                vertical-align: middle; /* DOESN'T WORK IN IE */
        }
      .content .text {
          width:150px;
      }
    </style>
</head>

<body>
    <div class="content">
        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test3.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
      <div class="leftSide text">this is a text on the left with no image</div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
</body>

</html>

【讨论】：

【解决方案4】：

只需删除.rightSide 类中的float:left;（和width:*;）。

div 的默认宽度是auto，这使它使用可用的宽度。

编辑：
这是更改的代码：

<html>
<head>
    <style type="text/css">
        .content{
                background-color: #fff;
                margin: 0px auto;
                width: 760px;
                border: 1px solid blue;
                font-size: 10pt;
        }

        .content .leftSide {
                background-color: yellow;
                float: left;
                padding: 5px;
        }

        .content .rightSide {
                background-color: orange;
                padding: 5px;
                text-align: center;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="leftSide"><img src="test.jpg"/></div>
        <div class="rightSide">Right side text should be centered.</div>
        <div style="clear:both"></div>
    </div>
    <div class="content">
        <div class="leftSide"><img src="test2.jpg"/></div>
        <div class="rightSide">And the background should fill the DIV of course.</div>
        <div style="clear:both"></div>
    </div>
</body>

</html>

【讨论】：

其实这行不通。然后左侧 div 位于右侧 div 的部分顶部（缩小内容的宽度，您会看到文本位于下方）。这使得内容以内容为中心，而不是可用空间。
@cletus：当然可以。如果没有足够的可用空间，文本会去哪里？