Beginner's stuff: Wie kann man verhindern, dass sich CSS-Divs überschneiden?

Erste Frage überhaupt, ich begann vor etwa einem Monat wegen eines Jobs, den ich bekam, an CSS zu arbeiten, aber es scheint, dass ich einige Probleme habe, die ich nicht beheben kann (hauptsächlich wegen meiner Unerfahrenheit und CSS von jemand anderem)Beginner's stuff: Wie kann man verhindern, dass sich CSS-Divs überschneiden?

Ich werde nicht so viel um den heißen Brei herumreden und das Problem erklären, bevor ich den Code zeige. Es gibt eine Reihe von Divs in einer formellen Umgebung, aber wenn der Text zu voll wird, dringt er in die nächste Div ein und repariert sie via CSS und nicht HTML, irgendwelche Korrekturen daran? Von dem Problem kann ich mir vorstellen, dass es so einfach ist, dass es albern ist, aber na ja.

Edit: Ich habe irgendwie vergessen, diesen Teil zu erwähnen, ich will nicht, dass sie ausgeblendet werden, ich will jedes div automatisch für die "vorherige" erlauben, um es zu beenden, ohne Überlappung (Versucht mit Überlauf: Auto aber es ihnen Scrollbalken gab, auf alle Formen in der gesamten Website.

Hier ist ein Bild, wie es im Moment aussieht, ich bin sicher, dass Sie das Problem sehen sofort

http://imgur.com/aj8pDaO

Hier ist der relevante 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 die 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; 
    }

Quelle

2013-07-08 Xionico

Welche Lösung suchen Sie? Möchten Sie den überschüssigen Text verbergen? Willst du es wickeln? Erwarten Sie etwas anderes? –

Ich habe vergessen, diesen Teil zu erwähnen, ich will nicht, dass sie ausgeblendet werden, ich möchte, dass jedes div automatisch das "vorherige" erlaubt, um es ohne Überlappung zu beenden (Versucht mit Überlauf: Auto, aber es gab ihnen Bildlaufleisten zu allen Formen in der ganzen Seite – Xionico

Hier. Sie wenden eine CSS-Regel auf alle Labels an. Die Überlappung passiert aufgrund dieser Regel.

Um dies zu beheben, entfernen Sie die .form-nivel Label-Regel und fügen Sie diese hinzu.

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

Quelle

2013-07-08 20:10:16

Der Grund für nth-childs ist, weil ich nehme an, dass Sie diese Informationen als Spaltenformat zusammenstellen Das wird mak Vergewissern Sie sich, dass alle weiteren Einträge diese Spalte/Tabelle widerspiegeln. ** Ich empfehle die Verwendung von Tabellen in der Zukunft. –

Ihre Lösung scheint die zu sein, die am besten funktioniert, und ja, ich bin ein Neuling in diesem und vor allem, es ist nicht einmal mein eigener Code (sie schickten es mir, um es zu reparieren ...), also Ich habe ein paar Probleme, ich werde es auch in einer Tabelle versuchen. Momentan scheint sich der Text zu formatieren, nachdem er das geändert hat, aber das Problem liegt in der dritten Zeile, die zweite Zeile der Adressinfo beginnt ganz links auf dem Bildschirm, weiß irgendeinen Weg, um ihn an der ersten Zeile auszurichten gestartet? – Xionico

Versuchen Sie, es als Tabelle zu wiederholen. Die Tabelle hilft bei der Lösung des Ausrichtungsproblems. Wenn nicht, lass es mich wissen. Hier ist ein Link zu grundlegenden Tabellen in HTML. http://www.w3schools.com/html/html_tables.asp –

können Sie Überlauf verwenden: versteckt, den Inhalt zu verstecken, wenn es in die nächste

Quelle

2013-07-08 19:46:55 Keith

Ich habe vergessen, diesen Teil zu erwähnen, ich will nicht, dass sie versteckt werden, ich möchte, dass jeder div automatisch den "vorherigen" zulässt, um es zu beenden, ohne sich zu überlappen (Versucht mit Überlauf: Auto, aber es gab ihnen Scrollbars, zu allen Formen in der gesamten Website – Xionico

der CSS-Logik für die linken Etiketten und die richtigen Etiketten überläuft sind gleich.

Das erste, was Sie tun sollten, ist sie auseinander zu setzen.

<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 Ihrem css Sie so etwas tun würde:

.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 Etiketten größer und ausgerichtet sie nach links.

Außerdem sollten Sie hinzufügen:

<meta charset="utf-8">

auf der HTML-Kopf. Dies soll Charaktere mit Akzenten darstellen können.

Quelle

2013-07-08 19:53:41 Cobo

Danke für die Tipps! Gerade jetzt versuche ich diese Methode auch, aber scheint nicht viel Unterschied nach dem Teilen sie gemacht haben in linken und rechten Etiketten (ein Problem an meinem Ende, bin ich sicher), und ja, nur hinzugefügt, dass Meta-Zeichensatz, wirkte Wunder! – Xionico

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

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

Quelle

2013-07-08 19:55:07

Versuchen Zugabe:

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

Quelle

2013-07-08 20:08:02 Cobo

Beginner's stuff: Wie kann man verhindern, dass sich CSS-Divs überschneiden?

Antwort

Verwandte Themen