web-dev-qa-db-fra.com

Trucs pour débutants: Comment empêcher les Divs CSS de se chevaucher?

Première question, j'ai commencé à travailler sur CSS il y a environ un mois en raison d'un travail que j'ai obtenu, mais il semble que j'ai rencontré des problèmes que je ne peux pas résoudre (principalement en raison de mon inexpérience et du fait que c'est le CSS de quelqu'un d'autre)

Je ne vais pas autant tourner autour du pot et expliquer le problème avant d'afficher le code. Il y a un ensemble de Div dans un paramètre de type formulaire, mais lorsque le texte est trop encombré, il envahit le prochain Div, donc le corriger via CSS et non HTML, une solution à ce problème? Du problème même, je peux imaginer que c'est quelque chose de si facile que c'est idiot, mais bon, oui.

Edit: j'ai un peu oublié de mentionner cette partie, je ne veux pas qu'ils soient cachés, je veux que chaque div permette automatiquement à la "précédente" de finir c'est concent sans se chevaucher (Essayé avec débordement: Auto mais ça leur a donné barres de défilement, à tous les formulaires de l'ensemble du site.

Voici une image de ce à quoi il ressemble en ce moment, je suis sûr que vous verrez le problème tout de suite

http://imgur.com/aj8pDaO

Voici le HTML pertinent

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

Et voici le 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;
    }
csshtmloverlap
16
Xionico

Ici. Vous appliquez une règle CSS à toutes les étiquettes. Le chevauchement se produit en raison de cette règle.

float: left;

Pour résoudre ce problème, supprimez la règle d'étiquette .form-nivel et ajoutez-les.

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

vous pouvez utiliser le débordement: caché pour masquer le contenu s'il déborde dans le suivant

1
Keith

La logique CSS pour les étiquettes de gauche et les étiquettes de droite est la même.

La première chose à faire est de les différencier.

<div class="form-nivel">
    <label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
    <label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
  • Remarquez la classe ajoutée

Ensuite, sur votre CSS, vous feriez quelque chose comme ceci:

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

J'ai agrandi les étiquettes de droite et les ai alignées à gauche.

Vous devez également ajouter:

<meta charset="utf-8">

sur la tête html. C'est pour pouvoir afficher des caractères avec des accents.

1
Cobo

Essayez d'ajouter:

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

entre chaque rangée.

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

Pourquoi ne pas simplement garder votre <label/>s en ligne? Suppression de toutes les déclarations inutiles ...

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