Question

我正在为我玩的SIM游戏制作CSS设计，并且客户要求4个盒子，两个大盒子，在它们之间，两个水平对齐的盒子。它们工作正常，除非我尝试添加标题。整个网站都设置在一个荒谬的数量表中，基本上是从90年代编写的。我制作的所有盒子都是div并对齐，以便与页面上现有的盒子相遇。

主要框是我想要所有四个框上的标题，分开并且不滚动。但是，正如您在fiddle中看到的那样，没有任何东西是对齐的。当我尝试将标题放在水平框上时，它真的会弄乱对齐。我是一个相当新的编码员，非常感谢一些帮助。

div {
display: block;
color: #fff;
}
.topcontain{
width:500px;
height:300px;
}
.topleftbox {
width:240px;
height:300px;
overflow:auto;
float:left;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}

.toprightbox {
width:240px;
height:300px;
overflow:auto;
float:right;
background:#505665;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
font-size: 12px!important;
margin: 5px;
opacity: .75;
}
.bottomcontain {
width:500px;
height:300px;
}
.header {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 14px;
border: 1px solid #030711;
opacity: 1.0;
}
.bottombox {
width:500px;
height:300px;
overflow:auto;
float:center;
background:#505665;
font-size: 12px;
color:#fff;
text-align:center;
display:block;
font-family: 'Snippet', sans-serif;
opacity: .75;
}
.credit {
width:500px;
float:center;
background:#060e23;
color:#fff;
text-align:center;
display:block;
font-size: 12px;
border: 1px solid #030711;
opacity: .85;
}
.top {
font-family: 'Snippet', sans-serif;
background : #060e23;
color : #fff;
font-size : 15px;
padding : 5px 15px;
font-weight : normal;
text-align : center;
border: 1px solid #030711;
opacity: .90;
}

以下是我编码的页面的外观： example

再次感谢你！

Answer 1

Demo Fiddle

在CSS中

.clear{
    clear:both;
}

在HTML中

<div class="clear">&nbsp;</div>

Answer 2

http://jsfiddle.net/6bEsE/6/

   <div class="bottomcontain">
      <div class="header">Lorem ipsum</div>
      <div class="bottombox">
         [TOP]
      </div>
   </div>
   <div class="topcontain">
        <div class="topleftbox">
            <div class="top">Lorem ipsum</div>
            <div>
                [MIDDLE LEFT]
            </div>
        </div>
        <div class="toprightbox">
            <div class="top">Lorem ipsum</div>
            <div>
                [MIDDLE RIGHT]
            </div>
        </div>
    </div>


    <div class="bottomcontain">
        <div class="header">Lorem ipsum</div>
        <div class="bottombox">
            [BOTTOM]
        </div>
    </div>

    <div class="credit">Layout and CSS by Echo [#15480]</div>

我快速清理了你的代码（5分钟）但它远未完成它

首先，你的div关闭不好。其次，你有div的固定高度。具有固定宽度和高度以及可以容纳的文本的div将创建滚动。

在插入所有文本之前，尝试从上面提供的简单示例开始修复容器。此外，您可能需要更改html结构，以对那些浮动的中间div进行分组。

如何防止DIV重叠？

2 个答案:

Demo Fiddle