Первый вопрос когда-либо, я начал работать над CSS около месяца назад из-за работы, которую я получил, но, похоже, я столкнулся с некоторыми проблемами, которые я не могу исправить (в основном из-за моей неопытности и что это кто-то еще CSS)
Я не буду так сильно бить вокруг куста и объяснять проблему перед показом кода. Есть набор Div в форме, подобной настройке, но когда текст становится слишком переполненным, он вторгается в следующее Div, поэтому, исправляя его с помощью CSS, а не HTML, любое исправление по этому вопросу? Из самой проблемы я могу представить себе что-то настолько легкое, что это глупо, но хорошо, да.
Изменить: я как бы забыл упомянуть эту часть, я не хочу, чтобы они были скрыты, я хочу, чтобы каждый div автоматически позволял "предыдущему" завершить его концентрацию без перекрытия (пробовал с переполнением: автоматически, но он дал им полосы прокрутки ко всем формам на всем сайте.
Вот пример того, как он выглядит на данный момент, я уверен, что вы сразу увидите проблему.
Здесь соответствующий 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>
И вот 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;
}