Начинающий материал: как прекратить разделение CSS 'Divs?

Первый вопрос когда-либо, я начал работать над 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;
    }

Ответы

Ответ 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;
}

Ответ 2

Логика 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-заголовке. Это позволяет отображать символы с акцентами.

Ответ 3

вы можете использовать переполнение: скрытое, чтобы скрыть содержимое, если оно переполнится в следующий

Ответ 4

Почему бы просто не сохранить встроенный <label/>? Удаление всех ненужных объявлений...

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