Html 初学者的东西：如何阻止 CSS 的 Div 重叠？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17534684/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Beginner's stuff: How to stop CSS' Divs from overlapping?
提问by Xionico
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)
有史以来的第一个问题，我大约一个月前开始研究 CSS，因为我得到了一份工作，但似乎我遇到了一些我无法解决的问题（主要是由于我的经验不足，而且是别人的 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.
我不会在展示代码之前绕圈子解释问题。在类似表单的设置中有一组 Div，但是当文本变得过于拥挤时，它会侵入下一个 Div，因此，通过 CSS 而不是 HTML 修复它，对此有任何修复吗？从这个问题我可以想象它是如此简单以至于愚蠢，但是，是的。
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.
编辑：我有点忘了提到那部分，我不希望它们被隐藏，我希望每个 div 自动允许“前一个”完成它的浓度而不重叠（尝试溢出：自动但它给了它们滚动条，到整个站点中的所有表单。
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
<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
这是 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;
}
采纳答案by Stephn_R
Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.
这里。您正在对所有标签应用 CSS 规则。重叠发生是因为这个规则。
float: left;
To fix this, remove the .form-nivel label rule and add these.
要解决此问题，请删除 .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;
}
回答by Keith
you can use overflow:hidden to hide the content if it overflows into the next one
如果内容溢出到下一个，您可以使用 overflow:hidden 隐藏内容
回答by Cobo
The CSS logic for the left labels and the right labels are the same.
左标签和右标签的 CSS 逻辑是相同的。
First thing you should do is set them apart.
您应该做的第一件事是将它们分开。
<div class="form-nivel">
<label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
<label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
- Notice the added class
- 注意添加的类
Then on your css you would do something like this:
然后在你的 css 上你会做这样的事情：
.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;
}
I made the right labels bigger and aligned them to the left.
我把右边的标签变大了，并将它们与左边对齐。
Also, you should add:
此外，您应该添加：
<meta charset="utf-8">
on the html head. This is to be able to display characters with accents.
在 html 头上。这是为了能够显示带有重音符号的字符。
回答by André Dion
Why not simply keep your <label/>s inline? Removing all the unneccessary declarations...
为什么不简单地保持你的<label/>s 内联？删除所有不必要的声明...
.form-nivel label {
margin-right: 10px;
line-height: 20px;
}
回答by Cobo
Try adding:
尝试添加：
<div class="clearfix"></div>
between each row.
每行之间。
<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>
