Question

我有以下CSS设置可用于两个不同的页面;

#content{
width:960px;
margin-top:0px; 
height:auto; 
font-family:arial; 
font-size:1.em; 
background-color:#f2f2f2; 
}

#left-div {
width:600px;
padding-top:20px;
text-align:center;
line-height:.5em;
display:inline-block;
float:left;
}

#right-div {
width:300px;
margin-top:40px;
margin-right:20px;
display:inline-block;
text-align:center;
float:right;
background-color:#e0e0e0;
}

#isa-left {
width:440px;
margin-top:40px;
margin-left:30px;
margin-right:10px;
display:inline-block;
text-align:justify;
float:left;
}

#isa-right {
width:440px;
margin-top:40px;
margin-left:10px;
margin-right:30px;
display:inline-block;
text-align:center;
float:right;
}

在我使用left-div和right div的页面上;

<div id="content">
 <div id="left-div"> Content </div>
 <div id="right-div"> Content </div> 
</div>

这是发生了什么。在FF，IE，Safari和Chrome中，它看起来只是我希望两个div彼此相邻，背景颜色为content div中的＃f2f2f2。

在我使用isa-left和isa-right的第二页上，使用与上面相同的设置，内部div仍显示我期望的位置，但现在内容div的背景颜色未显示

在此处发现有相同问题的帖子后，我将此行overflow:auto;添加到内容div。

现在FF中的两个页面内容都显示在内容div之外，右边960像素，显示背景颜色。在IE，Safari和Chrome中，两个页面都显示得非常完美。

我的问题是，一旦我添加了overflow:auto;，导致两个内部div在FF中的内容div的转义是什么？或者有没有办法解决它，以便在不使用overflow:auto;的情况下在第二页上显示背景颜色？

任何建议都表示赞赏。

Answer 1

试试这个。我认为这可能是你问题的解决方案。

http://jsfiddle.net/6dBdx/

-Code参考 -

CSS：

.wrapper {
    width:400px;
    margin-top:0px;
    height:auto;
    font-family:arial;
    font-size:1.em;
    background-color:#f2f2f2;
    margin-bottom:15px;
}
.wrapper > div.box {
    padding-top:20px;
    text-align:center;
    line-height:.5em;
    border:thin solid #999;
    /* Adding this for example purposes */
    height:150px;
    width:150px;
}
.pull-right {
    float:right;
}
.pull-left {
    float:left;
}
.clear-fix {
    clear:both;
}

HTML

<label>Float Left Only</label>
<div class="wrapper">
    <div class="pull-left box">One</div>
    <div class="pull-left box">Two</div>
    <div class="clear-fix"></div>
</div>
<label>Float Left &amp; Right</label>
<div class="wrapper">
    <div class="pull-left box">One</div>
    <div class="pull-right box">Two</div>
    <div class="clear-fix"></div>
</div>

快速注释，不要忘记在浮动后添加一个清晰的div，以便在浮动元素后正确显示元素。此外，如果您希望元素彼此相邻排列，请尝试使用float：left作为经验法则，除非您希望元素在右侧排成一行，在这种情况下...... float：right

CSS浮动问题跨多个浏览器

1 个答案: