CSS：将div浮动到右侧会导致容器div在IE中拉伸到屏幕的全宽

Question

我在这里看到了一个类似的问题（链接），但并没有找到答案。我的问题是，在父元素div内部右浮动了一个元素，在IE7中导致整个页面宽度被拉伸。但在其他浏览器（Firefox和Chrome）中不会发生这种情况。下面是我使用的HTML：

<div id="journal" class="journalIE">
    <div class="title_bar">
        <div>
            Testing
        </div>
        <div class="actions"></div>
        <div class="clear"></div>
    </div>
</div>

以下是我使用的CSS样式表。我注意到，其他人引用的问题和我的问题都有一个共同点，那就是两个父级div都应用了定位（上面的人使用了absolute，我使用了fixed）。

#journal
{
    z-index: 1;
}

.journalIE
{
    right: 1px;
    bottom: 18px;
    position: fixed;
}

#journal .title_bar
{
    background: #F3F3F3;
    border: 1px solid #C5D6E8;
    color: #363638;
    font-size: 11pt;
    font-weight: bold;
    height: 20px;
    padding: 4px;
    margin-bottom: 4px;
}

#journal .title_bar .actions
{
    float: right;
}

.clear
{
    clear: both;
}

请注意，'actions'类被向右浮动。如果我去掉这个浮动，我的框看起来像这样。但是加上浮动后，它会拉伸整个屏幕，看起来像这样。这是已知的IE bug吗？因为在其他任何浏览器中都没有发生，这让我很疯狂。

对于那些好奇的人，我确实在“actions”div中有内容，但已经将所有内容剥离到根本问题。

非常感谢您的帮助。谢谢。

- Matt

Answer 1

你需要一个宽度：*浮动框必须有明确的宽度（通过“width”属性分配或在替换元素的情况下具有其固有宽度）。

来源：W3C

- easement

---

那么这个问题只出现在IE浏览器中吗？因为我已经说了，Firefox和Chrome没有出现这种情况。我不想给它一个固定的宽度，因为其中的内容将会动态变化，我希望宽度能够适当地扩展。 - Matt

另外，你建议给哪个框设置宽度？我将 .journalIE 类的 float: right 去掉了，但结果还是一样。 - Matt

Answer 2

我不太确定您想要什么，因为您没有解释您想要在“actions” div中做什么，但是如果您想让“actions” div右浮动到“Testing” div旁边，我刚刚尝试制作了一个单独的.floatr类，或者如果您直接将样式应用于div，它也可以工作。

.floatr {
float: right;
}

使用.floatr类，将其应用于“actions” div：

<div class="actions floatr"></div>

我不知道为什么，“actions” div似乎忽略了你在类中设置的浮动设置。我个人更喜欢对div应用多个类，这使得我可以重复使用该类来实现其他div所需的效果，但我听说有些浏览器将忽略在第一个类之后声明的任何类。哦好吧，我还没有遇到过主流浏览器出现这种问题...

等等。

我再次检查了代码，我认为你只是在设置类时出了问题。你的“actions” div缺少了两个逗号，请在CSS中添加它们：

#journal .title_bar, .actions
{
    float: right;
}

我想有时候为了弄清楚某件事情，你得直接应用效果以确保它能按照你期望的方式运行，然后如果它确实起作用，那么很可能是某种语法错误。呵呵。

- Insanekitten

Answer 3

做这个

<div id="journal" class="journalIE"> 
<div class="title_bar"> 
    <div class="Test"> 
        Testing 
    </div> 
    <div class="actions"></div> 
    <div class="clear"></div> 
</div> 

然后添加一个CSS类

.Test { float:right; }

应该可以了，如果不行请告诉我们。

MNK

- user153410

---

感谢您的快速回复。不幸的是，即使使用“actions” div仍向右浮动，它仍然会拉伸整个页面的宽度，并将“Testing”放在最右边。图片在这里：http://i49.tinypic.com/5ap4bk.jpg - Matt