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

Question

提问by Edward Tanguay

How can I get the right floating DIVs to fill their available space?

如何获得正确的浮动 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>

INTERMEDIATE ANSWER:

中间答案：

Thanks Guffa and Rich, taking float:left off the right side allowed the text to be centered, but to get the background color to extend down, I had to also make the background color of the parent DIV.

感谢 Guffa 和 Rich，从右侧获取 float:left 允许文本居中，但为了让背景颜色向下延伸，我还必须制作父 DIV 的背景颜色。

However, I still can't get the text to align in the middle vertically since the DIV doesn't actually go all the way down, is there an "auto" for that too? e.g. height:*, or float-down:auto? As Cletus mentioned below, this would all be trivial in HTML tables, the CSS designers surely included some property to "make the vertical space fill downward".

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

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

替代文字 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>

Answer 1

采纳答案by cletus

If you use floats, you pretty much need to give them widths. Floats are fine if you specify the width or you're happy with whatever the browser calculates as the minimum required width. As soon as you need them to expand to fill available space you're out of luck.

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

In fact you're using the wrong tool.

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

So you have two possibilities:

所以你有两种可能：

Fix the size of the floats; or
Use a table.

固定浮点数的大小；或者
使用一张桌子。

With tables this is a trvial problem to solve (waits for the anti-table pure-CSS fanatics to go nuts).

对于表格，这是一个要解决的微不足道的问题（等待反表格的纯 CSS 狂热分子发疯）。

EDIT:Ok, you want to do verticall centering as well. Now you're really in trouble. See Can you do this HTML layout without using tables?for how hard even simple layout can be with pure CSS, particularly when you want to do vertical centering (when the container or the child aren't fixed height) or side by side content.

编辑：好的，你也想做垂直居中。现在你真的有麻烦了。请参阅您可以在不使用表格的情况下进行此 HTML 布局吗？使用纯 CSS 进行简单的布局有多困难，特别是当您想要进行垂直居中（当容器或子项的高度不固定时）或并排内容时。

Again, tables make this trivial with vertical-align: middle.

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

If you want more information on vertical centering with pure CSS, see:

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

Vertical Centering in CSS: three levels of nested divs... just to get vertical centering;
How to: vertical centering with CSS; and
Vertical centering with CSS.

CSS 中的垂直居中：三层嵌套 div... 只是为了获得垂直居中；
如何：使用 CSS 垂直居中；和
使用 CSS 垂直居中。

Answer 2

回答by Rich Adams

This should do what you want. There's no need to float the right hand side if you're also floating the left. Just let the right hand side be as normal and it will fill the available space by default.

这应该做你想做的。如果您还浮动左侧，则无需浮动右侧。只需让右侧正常，默认情况下它将填充可用空间。

 .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>

Answer 3

回答by Noel Walters

I tend to agree with the "use a table" advocates, but after messing around for a while (in a not really knowing what I'm doing kind of way) I came up with this variation which fixes the vertical align problem in Firefox, Safari, Chrome, etc and doesn't make it any worse in IE.

我倾向于同意“使用表格”的倡导者，但是经过一段时间的混乱（以一种不知道我在做什么的方式）我想出了这个解决Firefox中垂直对齐问题的变体， Safari、Chrome 等，在 IE 中并没有让它变得更糟。

(my changes are on the lines that are less indented)

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

<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>

Answer 4

回答by Guffa

Just remove the float:left;in the .rightSideclass (and the width:*;).

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

The default width for a div is auto, which makes it use the available width.

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

Edit:
Here is the code with the change:

编辑：
这是更改的代码：

<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>

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

提问by Edward Tanguay

INTERMEDIATE ANSWER:

中间答案：

采纳答案by cletus

回答by Rich Adams

回答by Noel Walters

回答by Guffa

相关推荐

最近更新

标签

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

提问by Edward Tanguay

INTERMEDIATE ANSWER:

中间答案：

采纳答案by cletus

回答by Rich Adams

回答by Noel Walters

回答by Guffa

相关推荐

CSS 响应式 iframe（谷歌地图）和奇怪的调整大小

使用 CSS 影响 iframe 内的 div 样式

CSS 设置 select2 输入的宽度（通过 Angular-ui 指令）

CSS 在 Safari 中隐藏 textarea 调整大小句柄

相关推荐

最近更新

标签