css浮动故障排除

我有一个非常简单的CSS示例，详细如下。 .entry类生成一个带有1px黑色边框的简单框。下面的示例将在框中呈现“123”，并在框外呈现“abc”和“xyz”，因为这些元素用左右浮动标记。我的目标是让.box1里面的.entry左对齐，而.box2里面的.entry右对齐。css浮动故障排除

<html> 
<head> 
<style type="text/css"> 
     .entry 
    { 
     width: 400px; 
     border-style: solid; 
     border-width: 1px; 
     border-color: #000; 
    } 
    .box1 
    { 
     width: 75px; 
       float: left; 
    } 

    .box2 
    { 
     width: 300px; 
       float: right; 
    } 
</style> 
</head> 
<body> 
     <div class="entry"> 
      123 
      <div class="box1">abc</div> 
      <div class="box2">xyz</div> 
     </div> 
</body> 
</html>

它呈现罚款IE而不是Firefox的

来源

2009-05-29 NoCarrier

看起来好像没什么问题 - 不我期望的......也许一些截图来看看你的意思。这台电脑上没有IE。 – 2009-05-29 08:05:23

由于漂浮物被取出正常流量以外，它们周围的箱子会折叠。

我将首先解释它为什么在IE中工作。您已通过在每个元素上设置宽度或高度来给它“布局”。在这种情况下，它是width。有关更多信息，请参阅hasLayout。这非常方便，因为它还可以解决您遇到的大多数其他IE错误。

神奇的子弹是：

 
height: 1%; /* or any other value. IE6 wrongly sees height as min-height. */

，或者如果你是不是在设置一个特定尺寸的位置，使用

 
zoom: 1; /* A IE only property. Doesn't validate, but doesn't cause any harm either */

所以，你的问题，使得它在工作适当的浏览器，有几个解决方案。如果您将浮动元素的父级设置为float，则该框会围绕儿童浮标拉伸。尽管这可能会给DOM带来更多麻烦，但我不知道其余的标记是如何的。

一个更简单的方法可以设置overflow:hidden;也可以修复它。但是现在你必须留意长URL，代码片段或其他任何可能意外推出div的内容。如果你自己做整个网站，这通常不是一个大问题，如果你把它交给某个用于CMS的人，机会可能会稍大。如果你无法解决布局周围的无数浮动问题，仍然值得冒险。

在最后添加一个元素以清除浮动元素也是一种做法，但我发现前者更容易。

我最好停止张口闭口，你可能想看到代码：

 

.entry { 
    width: 400px; 
    border: 1px solid #000; 
    float: left;  /* Option 1 */ 
    overflow: hidden; /* Option 2 */ 
} 
.box1 { 
    width: 75px; 
    float: left; 
} 
.box2 { 
    width: 300px; 
    float: right; 
}

来源

2009-05-29 09:22:52 Eystein

既然你没有文档类型，你正在引发Quirks mode。这使得浏览器显得更具有bug，然后是标准（AKA严格）模式。 Internet Explorer是这里最严重的罪犯。

我怀疑你的问题是你想让.entry的边框扩展到.box1和.box2。请参阅containing floats了解更多详细信息，Methods for Containing Floats获取更好的解决方案。

当然，您的问题可能会有所不同。 You were rather vague。

来源

2009-05-29 08:19:50 Quentin

你需要清除的float FF：

.entry:after { 
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden; 
}

我会做的IE浏览器，以及：

.entry { min-height: 10px;}

否则，我不明白为什么这是行不通的。 ..

来源

2009-05-29 08:41:19 Jason

试试这个;我已经测试过它，它在FF 3，Safari 3.2，Opera 9.6和IE 7中工作。

（我在.box2 div中添加额外的文本行的原因是为了确保.entry div可以垂直拉伸额外的内容被添加）。

<html> 
<head> 
<style type="text/css"> 
    .entry 
    { 
     width: 400px; 
     border-style: solid; 
     border-width: 1px; 
     border-color: #000; 
    } 
    .box1 
    { 
     width: 75px; 
     float: left; 
    } 

    .box2 
    { 
     width: 300px; 
     float; left; 
     margin: 0 0 0 75px; 
    } 

    .entry span 
    { 
     width: 400px; 
     float: left; 
    } 
</style> 
</head> 
<body> 
     <div class="entry"> 
      <span>123</span> 
      <div class="box1">abc</div> 
      <div class="box2">xyz<br>More text</div> 
     </div> 
</body> 
</html>

来源

2009-05-29 08:52:56

你仍然需要清理你的花车... – Jason 2009-05-29 08:59:15

尝试增加溢出：隐藏（或自动）.entry {...}

来源

2009-05-29 10:30:37 Mic

css浮动故障排除

回答

相关问题