初学者的东西：如何阻止CSS的div从重叠？ [英] Beginner's stuff: How to stop CSS' Divs from overlapping?
问题描述
第一个问题，我开始工作在大约一个月前，由于我的工作，但似乎我遇到一些问题，我不能解决（主要是因为我的经验，它是别人的CSS） / p>
我不会在显示代码之前绕过这么多的问题，解释问题。有一组Div在一个形式的设置，但当文本太拥挤它入侵下一个Div所以，通过CSS而不是HTML修复它，任何修复？从非常的问题，我可以想象它是一个这么容易它是傻的，但很好，是的。
编辑：我有点忘了提及那一部分，我不想他们被隐藏，我想让每个div自动允许前一个完成它的浓度没有重叠（尝试与溢出：自动，但它给他们滚动条，所有的形式在整个网站。
这里有一张照片，我很肯定你会马上看到这个问题。
以下是相关的HTML
： < html>
< head>
< link href =hue.css =stylesheet>
< / head>
< body>
< div class =content>
< div class =column>
< div class =form>
< div class =form-nivel>
< =cfdiCreate：organizationRfc> RFC< / label>< label id =cfdiCreate：organizationRfc> XXXXXXXXXXXX< / label>
< / div>
< div class =form-nivel>
< label for =cfdiCreate：organizationTaxSystem>方案finance< / 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 ColoniaTecnológicoMonterrey，NuevoLeón，México.C.P.XXXXXX< / label&
< / div>
< div class =form-nivel>
< label for =cfdiCreate：organizationExpeditionPlace> Lugar deexpedición< / label>< label id =cfdiCreate：organizationExpeditionPlace> Suc.1 Chiapas，México。 < / label>
< / div>
< / div>
< / div>
< div class =column secondary>
<！ - ？xml version =1.0encoding =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标签，.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;
}
您正在将CSS规则应用于所有标签。由于此规则，重叠发生。
float：left;
要解决此问题，请删除.form-nivel标签规则并添加这些规则。
.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;
}
First question ever, I started working on CSS about a month ago due to a job I got, but it seems I have encountered some problems I can't fix (mainly due to my inexperience and that it's someone else's CSS)
I won't beat around the bush so much and explain the problem before showing the code. There are a set of Div's in a form-like setting, but when the text get's too crowded it invades the next Div so, fixing it via CSS and not HTML, any fix on this? From the very problem I can imagine it's something so easy it's silly, but well, yeah.
Edit: I kinda of forgot to mention that part, I don't want them to be hidden, I want each div to automatically allow for the "previous" one to finish it's concent without overlapping (Tried with overflow: Auto but it gave them scrollbars, to all the forms in the whole site.
Here's a pic of how it looks at the moment, I'm sure you will see the problem right away
Here's the relevant 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>
And here's the 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;
}
Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.
float: left;
To fix this, remove the .form-nivel label rule and add these.
.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;
}
这篇关于初学者的东西：如何阻止CSS的div从重叠？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
