如何防止DIV重叠？答案

【问题标题】：How to keep DIV from overlapping?如何防止DIV重叠？
【发布时间】：2014-06-20 23:51:50
【问题描述】：

我正在为我玩的 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

再次感谢您！

【问题讨论】：

你的 CSS 重复太多了。它相当混乱。你应该尝试一些整合。 toprightbox 和 topleftbox 是相同的，除了浮动。所以如果你只是添加另一个类你可以说.box { //all that code}.topleftbox { float: left}.toprightbox { float: right)它更整洁
@GEspinha 如果它影响回答问题的能力
@Adjit 哦，等等，我想你是对的，我很抱歉；）
@GEspinha 不用担心，但是当 CSS 超级冗余时，很难挑出一个问题，尤其是当有多个问题时。 OP 需要在复制问题的简短示例中尝试复制问题。不只是向我们扔他们的 CSS 墙。 90% 的情况下，当我尝试在 jsFiddle 中复制问题时，在 SO 上提出问题时，我会回答我自己的问题，因为我将问题单独列出并更容易查看发生了什么。
@Adjit 我最初确实将所有内容都放在了一个更简单的形式中，但是在我的情况下，除非与整个网站的代码配对，否则什么都不会起作用。无论如何，问题已经解决了，谢谢。

标签： html css alignment

【解决方案1】：

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 进行分组。

【讨论】：

【解决方案2】：

Demo Fiddle

在 CSS 中

.clear{
    clear:both;
}

在 HTML 中

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

【讨论】：

它在 Fiddle 中运行良好，但在 the site 上仍然很混乱。不过谢谢。
@Echo 它到底应该是什么样子..？
我创建了一个包含所有网站代码的fiddle，向您展示正在发生的事情。标题与主框分开。