Beginner 's stuff: How to stop CSS' Divs nicht überlagern?

Erste Frage immer, ich fing mit der Arbeit an CSS vor ca. einem Monat durch einen job, den ich bekam, aber es scheint, ich habe einige Probleme die ich nicht beheben kann (vor allem aufgrund meiner Unerfahrenheit und, dass es jemand anderes CSS)

Ich will nicht um den heißen Brei herumreden so viel, und erklären Sie das problem, bevor Sie sehen, der code. Es gibt eine Reihe von Div ' s in einer form, die-wie Einstellung, aber wenn der text erhalten ist zu überfüllt, es dringt in das nächste Div so, fixieren es per CSS und nicht HTML, jedes Update auf dieser? Aus der sehr problem, ich kann mir vorstellen, es ist etwas so einfach, es ist albern, aber nun ja.

Edit: ich irgendwie vergessen zu erwähnen, dass ein Teil, ich will nicht, dass Sie versteckt werden, möchte ich die einzelnen div-automatisch für die "vorherigen" ein, um es zu beenden - KONZ ohne überlappung (Versucht, mit overflow: Auto aber es gab Ihnen die Bildlaufleisten, um alle Formen in der ganzen site.

Hier ein pic wie es im moment aussieht, bin ich sicher, Sie werden sehen, das problem sofort

http://imgur.com/aj8pDaO

Hier ist der entsprechende 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>

Und hier ist der 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;
    }

InformationsquelleAutor der Frage Xionico | 2013-07-08

  1. 9

    Hier. Sie sind die Anwendung einer CSS-Regel auf alle Etiketten. Die überlappung geschieht, weil von dieser Regel.

    float: left;

    Dieses Problem zu beheben, entfernen Sie die .form-nivel-label-Regel und fügen Sie diese.

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

    InformationsquelleAutor der Antwort Stephn_R

  2. 1

    CSS-Logik für die linke Etiketten und die richtigen Bezeichnungen sind die gleichen.

    Erste, was Sie tun sollten ist, setzen Sie Sie auseinander.

    <div class="form-nivel">
    <label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
    <label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
    • Beachten Sie die hinzugefügte Klasse

    Dann auf Ihre css-würden Sie so etwas tun:

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

    Machte ich die richtigen Beschriftungen größer und richteten Sie auf der linken Seite.

    Außerdem sollten Sie hinzufügen:

    <meta charset="utf-8">

    auf dem html-Kopf. Dieser ist in der Lage, zum anzeigen von Zeichen mit Akzenten.

    InformationsquelleAutor der Antwort Cobo

  3. 0

    können Sie overflow:hidden zu verstecken den Inhalt, wenn es überläufe in den nächsten

    InformationsquelleAutor der Antwort Keith

  4. 0

    Warum nicht einfach halten Sie Ihre <label/>s inline? Entfernen Sie alle unnötige Erklärungen...

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

    InformationsquelleAutor der Antwort André Dion

  5. 0

    Versuchen Sie, hinzufügen:

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

    zwischen jeder Zeile.

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

    InformationsquelleAutor der Antwort Cobo

Schreibe einen Kommentar