Question

自从我做了一些css设计工作以来，已经有一段时间了。我的html中标有3列的下半部分，如：

<section id="lowerContent">
    <section id="lcLeft"></section>
    <section id="lcMiddle"></section>
    <section id="lcRight"></section>
</section>

我的css是这样的部分：

section#lowerContent {
    width: 958px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    height: 405px;
    overflow:hidden;
}

section#lcLeft {
    width: 216px;
    float:left;
    height: 100%;
    border-right: 1px solid grey;   
}

section#lcMiddle {
    width: 428px;
    float:left;
    height: 100%;
    border-left: 1px solid grey;
    border-right: 1px solid grey;   
    margin-left: 5px;
}

section#lcRight {
    width: 299px;
    float: right;
    height: 100%;
    border-left: 1px solid grey;
    margin-left: 5px;   
}

如果你添加带边距和边框的部分它是957px所以我在lowerContent部分内有1px备用。我的问题是IE8和FF。当我按ctrl +或ctrl时 - 最后一个div被推到第二行而没有保持其位置。它在chrome，opera和safari中正常工作。谁能告诉我我错过了什么？

由于

Answer 1

我的解决方案：

首先我将标记更改为以下内容：

<section id="lowerContent">     
    <section id="lcLeft">
        <section id="lcLeftInner"></section>
    </section>     
    <section id="lcMiddle">
        <section id="lcMiddleInner"></section>
    </section>     
    <section id="lcRight">
        <section id="lcRightInner"></section>
    </section>
</section>

css适用于所有主流浏览器，您可以按住ctrl +和ctrl - 而不会破坏布局。

    section#lowerContent {      
    width: 960px;      
    height: 405px;  
}    

section#lcLeft {      
    width: 218px;            
    height: 100%;       
} 

section#lcLeftInner {
    width: 216px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}   

section#lcMiddle {     
    width: 442px;          
    height: 100%; 
}

section#lcMiddleInner {
    width: 430px;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    margin-left: 5px;
    margin-right: 5px;
}

section#lcRight {      
    width: 300px;         
    height: 100%;      
}

section#lcRightInner {
    width: 298px
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

希望能有所帮助。

Answer 2

它在IE8和FF中也能正常工作：这就是当你浮动这些东西时应该发生的事情。当你控制+页面时，浮动的div没有地方可以去但是下来。如果你想让它们全部水平排列，你可以给每个z-index;或者你可以将它们放在桌子上。

Answer 3

在#lcRight之后尝试#lcMiddle并设置margin：0 305px 0 222px并删除float。

3列div布局的问题

3 个答案: