28

我有一个父母div向左浮动，有两个孩子div我需要向右浮动。

父级div应该（如果我正确理解规范）尽可能宽以包含子div级，这就是它在 Firefox 等人中的行为方式。

在 IE 中，父div级扩展为 100% 宽度。这似乎是具有子项向右浮动的浮动元素的问题。测试页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0;float:left;">
    <div style="border-top:solid 10px #00c;float:right;">Tester 1</div>
    <div style="border-top:solid 10px #c0c;float:right;">Tester 2</div>
</div>
</body>

</html>

不幸的是我不能固定子divs的宽度，所以我不能在父节点上设置一个固定的宽度。

是否有仅使用 CSS 的解决方法来使父级div与子级一样宽div？

4

8 回答 8

12

这是一个inline-block在 IE6 上工作的解决方案，如http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/以使元素的行为更像 right-floated <div>s：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>

<title>Float with inline-block test</title>

<style type="text/css">
    .container {
        border-top: solid 10px green;
        float: left;
    }

    .tester1,
    .tester2 {
        float: right;
    }

    .tester1 {
        border-top: solid 10px blue;
    }

    .tester2 {
        border-top: solid 10px purple;
    }
</style>

<!--[if lte IE 7]>
<style type="text/css">
    .container {
        text-align: right;
    }

    .tester1,
    .tester2 {
        float: none;
        zoom: 1; display: inline;/* display: inline-block; for block-level elements in IE 7 and 6. See http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
    }
</style>
<![endif]-->

</head>

<body>
<div class="container">
    <div class="tester1">Tester 1</div>
    <div class="tester2">Tester 2</div>
</div>
</body>
</html>
于 2010-05-04T06:21:44.630 回答
7

我想出了一个使用text-align: rightand的解决方案display: inline。

试试这个：

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="margin-top: 10px; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester 2</div>
        <div style="border-top:solid 10px #00c; display: inline;">Tester 1</div>
    </div>
</div>

请注意，我必须切换标记中“测试器”框的顺序，才能以与您的示例相同的方式显示。我认为在新容器上还有一个margin-top 的替代方案，但我现在没有时间研究。

如果您想为所有其他浏览器提供更简洁的样式，请尝试以下操作：

<div style="border-top:solid 10px #0c0; float: left;">
    <div style="float: right;">
        <div style="border-top:solid 10px #c0c; float: left;">Tester 2</div>
        <div style="border-top:solid 10px #00c; float: left;">Tester 1</div>
    </div>
</div>

当您想在这些框周围布置东西时，可能会出现一些不同的问题。但是，我认为这些问题将比这个更容易解决。

希望这对您有所帮助。

于 2009-05-15T13:46:47.983 回答
2

我想不出符合您要求的纯 CSS 解决方案，但如果您想使用 JavaScript 解决方案，也许以下代码可以提供帮助？我没有改变 div 的样式，我只添加了 ID main、sub1和sub2到您的 div 中。

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;
于 2009-05-12T10:49:02.233 回答
2

我遇到了同样的问题，并通过使用 position:absolute 和 right:0 定位子元素（我想向右浮动）来解决。我为父元素提供了足够的右填充以为子元素腾出空间……值得一试，可能不适用于所有应用程序！

于 2012-04-02T13:20:53.523 回答
0

使用单单元格表而不是外部 div 怎么样？可能需要更多工作才能正确对齐所有内容，但表格不会扩展。

于 2009-05-12T11:01:13.493 回答
0

您可以从以下内容开始：

<DIV style="BORDER: #0c0 10px solid; FLOAT: left; MARGIN-LEFT: 100%;">
<DIV style="BORDER: #00c 10px solid;FLOAT: right;">
Tester 1
</DIV>
<DIV style="BORDER: #c0c 10px solid;FLOAT: right;">
Tester 2
</DIV>
</DIV>

结果似乎至少在您正在寻找的范围内。显然，您希望根据需要对其进行调整，并且可能添加一些 css 逻辑以仅将其应用于浏览器 < IE 7。

如果这不是您想要的，请尝试使用一些负边距。

于 2009-05-13T16:24:31.443 回答
0

首先，你为什么不使用内联样式？

我会用它来用一个单独的 css 文件来定位 IE：

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->

我知道这不是一个直接的问题，但 IE 总是很难处理！我认识的大多数设计师/开发人员都会为 IE 制作一个全新的样式表。

于 2009-05-14T23:19:56.197 回答
0

一个非常 hacky 但仅适用于 IE、chrome 和 FF 的 CSS 解决方案。

我采用了 kaba 的解决方案 - 但问题是，它在 IE 中运行良好，但所有其他浏览器在 2 个子 div 之间显示 4px 空间。即使两个 div 上的内容都展开，该空间仍保持为 4px。所以为了解决这个问题，我使用了 IE 条件语句。我看起来不像世界上最好的代码，但它完成了工作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<title>Float test</title>
</head>

<body>
<div style="border-top:solid 10px #0c0; float: left;">

    <div style="border-top:solid 10px #00c; text-align: right;">
        <div style="border-top:solid 10px #c0c; display: inline;">Tester2</div>

        <div style="border-top:solid 10px #00c; display: inline;margin-left:-4px">

        <!--[if gte IE 5]>
        <div style="border-top:solid 10px #00c; display: inline;margin-left:4px">
        <![endif]-->

         Tester1

        <!--[if gte IE 5]>
        </div>
        <![endif]-->


        </div>

    </div>
</div>
</body>
</html>
于 2010-05-04T05:11:35.510 回答