初学者的东西：如何阻止 CSS 的 Div 重叠？答案

【问题标题】：Beginner's stuff: How to stop CSS' Divs from overlapping?初学者的东西：如何阻止 CSS 的 Div 重叠？
【发布时间】：2013-07-08 19:43:47
【问题描述】：

有史以来的第一个问题，大约一个月前，由于我得到了一份工作，我开始研究 CSS，但我似乎遇到了一些我无法解决的问题（主要是因为我没有经验，而且这是别人的 CSS）

我不会绕弯子，在展示代码之前解释问题。在类似表单的设置中有一组 Div，但是当文本过于拥挤时，它会侵入下一个 Div，因此，通过 CSS 而不是 HTML 来修复它，对此有什么解决办法吗？从这个问题我可以想象它是如此简单，但很愚蠢，但是，是的。

编辑：我有点忘了提到那部分，我不希望它们被隐藏，我希望每个 div 自动允许“前一个”在不重叠的情况下完成它（尝试溢出：自动但它为整个站点中的所有表单提供了滚动条。

这是它目前的样子，我相信你会马上看到问题

http://imgur.com/aj8pDaO

这是相关的 HTML

<html>
<head>
    <link href="hue.css" rel="stylesheet">
</head>
<body>
    <div class="content">

        <div class="column">
            <div class="form">
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationRfc">RFC</label><label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationTaxSystem">Regimen    fiscal</label><label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationTaxAddress">Domicilio  fiscal</label><label id="cfdiCreate:organizationTaxAddress">XXXXXX Colonia Tecnológico  Monterrey,Nuevo León,México.C.P.XXXXXX</label>
                </div>
                <div class="form-nivel">
                    <label for="cfdiCreate:organizationExpeditionPlace">Lugar de  expedición</label><label id="cfdiCreate:organizationExpeditionPlace">Suc.1 Chiapas,México.     </label>
                </div>
            </div>
        </div>
        <div class="column secondary">
            <!--?xml version="1.0" encoding="UTF-8"?-->
        </div>
</body>
</html>

这是CSS

body {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: center;
}

p {
    text-align: left;
}

.content {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    float: left;
    background: #;
    text-align: left;
}

    .content label, .content p {
        font-size: 16px;
        color: #024DA1;
        padding-left: 2%;
    }

.column {
    display: block;
    float: left;
    width: 48%;
    margin-top: 15px;
    height: auto;
    background:;
}

.secondary {
    margin-left: 10px;
}

.clearfix {
    clear: both;
    margin-bottom: 10px;
}

.form {
    display: block;
    width: 96%;
    height: auto;
    background:;
}

.form-nivel {
    display: block;
    width: 100%;
    width: 470px;
    min-height: 20px;
    margin-bottom: 20px;
    position: relative;
}

    .form-nivel label {
        width: 160px;
        float: left;
        height: 20px;
        line-height: 20px;
        margin-right: 10px;
        text-align: right;
    }

【问题讨论】：

您在寻找什么解决方案？你想隐藏多余的文字吗？你想把它包起来吗？你期待别的吗？
我有点忘了提到那部分，我不希望它们被隐藏，我希望每个 div 自动允许“前一个”在不重叠的情况下完成它（尝试溢出：自动，但它给了他们滚动条，整个网站的所有表单。

标签： css html overlap

【解决方案1】：

这里。您正在对所有标签应用 CSS 规则。重叠是因为这条规则而发生的。

float: left;

要解决此问题，请删除 .form-nivel 标签规则并添加这些。

.form-nivel label:nth-child(1) {
    width: 160px;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

.form-nivel label:nth-child(2) {
    width: 160px;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

【讨论】：

nth-childs 的原因是因为我假设您正在将此信息组装为列格式。这将确保任何进一步的条目反映此列/表的性质。 **我确实建议将来使用表格。
您的解决方案似乎是最有效的解决方案，是的，我是这方面的新手，最重要的是，它甚至不是我自己的代码（他们将其发送给我修复它...），所以我遇到了一些问题，我实际上也会尝试在表格中进行操作。现在文本似乎在更改后自行格式化，但问题出在第三行，地址信息的第二行从屏幕的最左侧开始，知道有什么方法可以将它与第一行的开始位置对齐吗？
尝试将其重做为表格。该表将有助于解决对齐问题。如果没有，请告诉我。这是 HTML 中基本表格的链接。 w3schools.com/html/html_tables.asp

【解决方案2】：

如果内容溢出到下一个，你可以使用 overflow:hidden 隐藏内容

【讨论】：

我有点忘了提到那部分，我不希望它们被隐藏，我希望每个 div 自动允许“前一个”在不重叠的情况下完成它（尝试溢出：自动，但它给了他们滚动条，整个网站的所有表单。

【解决方案3】：

左标签和右标签的 CSS 逻辑是一样的。

您应该做的第一件事是将它们分开。

<div class="form-nivel">
    <label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
    <label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>

注意添加的类

然后在你的 css 上你会做这样的事情：

.form-nivel label.leftLabel {
    width: 160px;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: right;
}

.form-nivel label.rightLabel {
    width: 400px;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-right: 10px;
    text-align: left;
}

我把右边的标签放大了，并把它们对齐到左边。

另外，你应该添加：

<meta charset="utf-8">

在 html 头部。这是为了能够显示带有重音符号的字符。

【讨论】：

感谢您的提示！现在我也在尝试这种方法，但在将它们分成左右标签后似乎没有太大区别（我敢肯定，这是我的问题），是的，只是添加了元字符集，创造了奇迹！

【解决方案4】：

为什么不简单地将您的<label/>s 内联？删除所有不必要的声明...

.form-nivel label {
    margin-right: 10px;
    line-height: 20px;
}

【讨论】：

【解决方案5】：

尝试添加：

<div class="clearfix"></div>

在每一行之间。

<div class="form-nivel">
    <label for="cfdiCreate:organizationRfc">RFC</label>
    <label        id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="clearfix"></div>
<div class="form-nivel">
    <label for="cfdiCreate:organizationTaxSystem">Regimen    fiscal</label>
    <label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>

【讨论】：