代码之家 › 专栏 › 技术社区 › Matt Anxo P

CSS:向右浮动div会导致容器div在IE中拉伸屏幕的整个宽度

stretch css-float html internet-explorer css

7

Matt Anxo P · 技术社区 · 14 年前

我看到了一个类似的问题 here

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

我为这些标签使用的CSS也在下面。我注意到上面提到的另一个人的问题和我的问题是一致的,那就是两个父div都应用了位置(上面的人有绝对的,我有固定的)。

#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”类是向右浮动的。如果我拿走那个浮子,我的盒子看起来像 this . 但是添加了float之后,它会扩展整个屏幕,看起来像 this . 这是一个已知的IE错误,因为它不会发生在任何其他浏览器,它让我发疯。

对于那些想知道的人,我确实在“actions”部分有内容,但是已经把所有的内容都剥离到了根本问题上。

任何协助都将不胜感激。非常感谢。

3 回复 | 直到 7 年前

1

easement 14 年前

您需要一个宽度:*浮动框必须有一个显式宽度(通过“width”属性指定,或者在替换元素的情况下指定其内在宽度)*

通过: W3C

2

0

user153410 14 年前

做这个

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

{

应该这样做,让我们知道如果它不工作。

MNK公司

3

0

Insanekitten 14 年前

我不完全确定你想要什么,因为你没有解释你想用“actions”div做什么,但是如果你想让“actions”div浮在“Testing”div旁边,我只是试着创建一个单独的.floatr类,或者如果你直接将样式应用到div,它也会起作用。

.floatr {
float: right;
}

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

我不知道为什么,但在我看来,“actions”div忽略了以这种方式设置的类中的float设置。我个人更喜欢将多个类应用于div,这样我就可以在其他div上重用这个类,而不是我想要的那种效果,但是我听说有些浏览器会忽略在第一个类之后声明的任何类。哦,好吧,我还没有遇到主要浏览器的问题。。。

哦,等等。

我又看了一遍代码,我想你只是对如何设置类有问题。您的“actions”div缺少操作,请尝试在CSS中添加逗号:

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