我已经有一段时间没有做一些 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 中正常工作。谁能告诉我我错过了什么?
谢谢
最佳答案
我的解决方案:
首先,我将标记更改为以下内容:
<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;
}
希望对某人有所帮助。
关于html - 3列div布局的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7381120/