初学者的东西：如何阻止CSS'Divs重叠？

First question ever, I started working on CSS about a month ago due to a job I got, but it seems I have encountered some problems I can't fix (mainly due to my inexperience and that it's someone else's CSS)

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

I won't beat around the bush so much and explain the problem before showing the code. There are a set of Div's in a form-like setting, but when the text get's too crowded it invades the next Div so, fixing it via CSS and not HTML, any fix on this? From the very problem I can imagine it's something so easy it's silly, but well, yeah.

我不会那么多地绕过灌木丛并在展示代码之前解释问题。在一个类似于设置的设置中有一组Div，但是当文本变得过于拥挤时它会侵入下一个Div，所以通过CSS而不是HTML来修复它，对此有什么解决方法吗？从我可以想象的问题来看，它很容易傻，但好吧，是的。

Edit: I kinda of forgot to mention that part, I don't want them to be hidden, I want each div to automatically allow for the "previous" one to finish it's concent without overlapping (Tried with overflow: Auto but it gave them scrollbars, to all the forms in the whole site.

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

Here's a pic of how it looks at the moment, I'm sure you will see the problem right away

这是一张关于当下情况的图片，我相信你会马上看到这个问题

http://imgur.com/aj8pDaO

Here's the relevant HTML

这是相关的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>

And here's the CSS

这是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;
    }

5 个解决方案

#1

Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.

这里。您正在将CSS规则应用于所有标签。由于这个规则，重叠发生了。

float: left;

To fix this, remove the .form-nivel label rule and add these.

要解决此问题，请删除.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;
}

#2

The CSS logic for the left labels and the right labels are the same.

左标签和右标签的CSS逻辑是相同的。

First thing you should do is set them apart.

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

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

Notice the added class
注意添加的类

Then on your css you would do something like this:

然后在你的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;
}

I made the right labels bigger and aligned them to the left.

我做了更大的正确标签并将它们对齐到左边。

Also, you should add:

另外，你应该添加：

<meta charset="utf-8">

on the html head. This is to be able to display characters with accents.

在HTML头上。这是为了能够显示带重音的字符。

#3

you can use overflow:hidden to hide the content if it overflows into the next one

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

#4

Why not simply keep your <label/>s inline? Removing all the unneccessary declarations...

为什么不简单地将内联？删除所有不必要的声明......

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

#5

Try adding:

尝试添加：

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

between each row.

每排之间。

<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>

#1