Trucs de débutant: comment empêcher les Divs de CSS de se chevaucher?
première question jamais, 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é certains problèmes que je ne peux pas résoudre (principalement en raison de mon inexpérience et que c'est CSS de quelqu'un d'autre)
Je ne vais pas tourner autour du pot et expliquer le problème avant de montrer le code. Il y a un ensemble de Div dans un cadre de forme-comme, mais quand le texte devient trop bondé il envahit la prochaine Div donc, le fixer via CSS et non HTML, toute solution sur ce? De la très problème j'imagine que c'est quelque chose de si facile que c'est idiot, mais bon, ouais.
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 terminer sa concentr ation sans chevauchement (essayé avec overflow: Auto mais il leur a donné des barres de défilement, à tous les formulaires dans l'ensemble du site.
Voici une image de ce qu'il regarde en ce moment, je suis sûr que vous verrez le problème loin
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;
}
5 réponses
Ici. Vous appliquez une règle CSS à toutes les étiquettes. Le chevauchement se produit à cause de cette règle.
float: left;
pour corriger cela, enlever le .forme de flèche de l'étiquette de la règle et l'ajouter.
.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;
}
la logique CSS pour les étiquettes de gauche et de droite est la même.
la première chose à faire est de les distinguer.
<div class="form-nivel">
<label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
<label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
- notez la classe ajoutée
Puis 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 je les ai alignées à gauche.
vous devez aussi ajouter:
<meta charset="utf-8">
sur la tête html. Cela permet d'Afficher des caractères avec accent.
vous pouvez utiliser overflow:hidden pour masquer le contenu s'il déborde sur le côté
Pourquoi ne pas simplement garder votre <label/>s inline? Supprimer toutes les déclarations inutiles...
.form-nivel label {
margin-right: 10px;
line-height: 20px;
}
Essayez d'ajouter:
<div class="clearfix"></div>
entre chaque ligne.
<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>