css - ejemplos - div html5
Cosas para principiantes: ¿Cómo evitar que las Divs de CSS se superpongan? (5)
La primera pregunta fue que comencé a trabajar en CSS hace aproximadamente un mes debido a un trabajo que obtuve, pero parece que encontré algunos problemas que no puedo solucionar (principalmente debido a mi inexperiencia y que es el CSS de otra persona)
No andaré mucho por ahí y explicaré el problema antes de mostrar el código. Hay un conjunto de Div en una configuración similar a una forma, pero cuando el texto está demasiado lleno invade la próxima Div, corrigiéndolo a través de CSS y no HTML, ¿hay alguna solución al respecto? Desde el mismo problema que puedo imaginar, es algo tan fácil que es una tontería, pero bueno, sí.
Edit: Me olvidé de mencionar esa parte, no quiero que se oculten, quiero que cada div permita automáticamente que la "anterior" termine su concentración sin superposición (se intentó con desbordamiento: automático, pero les dio scrollbars, a todas las formas en todo el sitio.
Aquí hay una foto de cómo se ve en este momento, estoy seguro de que verá el problema de inmediato.
Aquí está el HTML relevante
<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>
Y aquí está el 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;
}
¿Por qué no simplemente mantener sus <label/> s en línea? Eliminando todas las declaraciones innecesarias ...
.form-nivel label {
margin-right: 10px;
line-height: 20px;
}
Aquí. Estás aplicando una regla CSS a todas las etiquetas. La superposición ocurre debido a esta regla.
float: left;
Para solucionar este problema, elimine la regla de etiqueta .form-nivel y añádalas.
.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;
}
Intenta agregar:
<div class="clearfix"></div>
entre cada fila.
<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>
La lógica CSS para las etiquetas de la izquierda y las etiquetas de la derecha son las mismas.
Lo primero que debes hacer es separarlos.
<div class="form-nivel">
<label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
<label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
- Note la clase agregada
Entonces en tu css harías algo como esto:
.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;
}
Hice las etiquetas de la derecha más grandes y las alineé a la izquierda.
Además, debes añadir:
<meta charset="utf-8">
en la cabeza html. Esto es para poder mostrar los caracteres con acentos.
puede usar desbordamiento: oculto para ocultar el contenido si se desborda en el siguiente