Question

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

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

<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;
            float: left;
            width: *;
            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>

中级答案：

感谢Guffa和Rich，采取浮动：左侧偏离允许文本居中，但为了使背景颜色向下延伸，我还必须制作父DIV的背景颜色。

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

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

<html>
<head>
    <style type="text/css">
        .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 */
        }
    </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">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 1

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

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

所以你有两种可能性：

修复浮子的大小;或
使用表格。

使用表格这是一个需要解决的小问题（等待反表纯CSS狂热分子疯狂）。

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

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

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

Vertical Centering in CSS：嵌套div的三个级别......只是为了获得垂直居中;
How to: vertical centering with CSS;和
Vertical centering with CSS。

Answer 2

这应该做你想要的。如果你也漂浮在左边，没有必要浮动右手边。只需让右侧正常，默认情况下它将填满可用空间。

<html>
<head>
    <style type="text/css">
        .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;
        }
    </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>
    <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>
</body>
</html>

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

Answer 4

只需删除float:left;课程中的.rightSide（以及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中的可用空间？

中级答案：

4 个答案: