Question

我有一个父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>

不幸的是我无法修复子div的宽度，因此无法在父级上设置固定宽度。

是否存在仅限CSS的解决方法，使父div与子div一样宽？

Answer 1

这是一个解决方案，使inline-block在http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/上使用IE6，使元素的行为更像是右浮动<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>

Answer 2

我使用text-align: right和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>

注意我必须切换标记中“tester”框的顺序，以便以与示例相同的方式显示。我认为在新容器上有一个替代品，即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>

当您想要围绕这些框布局内容时，可能会出现一些不同的问题。但是，我认为这些问题比这个问题更容易解决。

希望这对你有所帮助。

Answer 3

我无法提出符合您要求的仅限CSS的解决方案，但如果您想使用JavaScript解决方案，可能以下代码可以提供帮助吗？我没有改变div的风格，我只将ID main，sub1和sub2添加到你的div中。

var myWidth = document.getElementById('sub1').offsetWidth + document.getElementById('sub2').offsetWidth;
document.getElementById('main').style.width = myWidth;

Answer 4

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

Answer 5

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

Answer 6

你可以开始的是：

<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逻辑以仅将其应用于浏览器＆lt; IE 7。

如果这不是您正在寻找的，请尝试使用一些负边距。

Answer 7

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

我使用它来使用单独的css文件来定位IE：

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

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

Answer 8

非常hacky但只有CSS的解决方案在IE，Chrome和FF中运行正常。

我采用了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>

Internet Explorer 6和7：当浮动元素包含向右浮动的子元素时，浮动元素将扩展为100％宽度。有解决方法吗？

8 个答案: