css – 如何获取浮动DIV来填充其父DIV中的可用空间？

如何获得正确的浮动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实际上并没有一直下降，所以我仍然无法让文字在中间垂直对齐，那么还有“auto”吗？例如height：*或float-down：auto？正如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>

解决方法

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

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

所以你有两种可能性：

修正浮标的大小;要么
>使用表。

有了表格，这是一个难以解决的问题(等待反表纯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。

原文地址：https://www.jb51.cc/css/219621.html

css – 如何获取浮动DIV来填充其父DIV中的可用空间？

解决方法

相关推荐