初学者的东西：如何阻止CSS的div从重叠？

编程入门行业动态更新时间:2024-10-16 18:39:00

本文介绍了初学者的东西：如何阻止CSS的div从重叠？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

第一个问题，我开始工作在大约一个月前，由于我的工作，但似乎我遇到一些问题，我不能解决（主要是因为我的经验，它是别人的CSS） / p>

我不会在显示代码之前绕过这么多的问题，解释问题。有一组Div在一个形式的设置，但当文本太拥挤它入侵下一个Div所以，通过CSS而不是HTML修复它，任何修复？从非常的问题，我可以想象它是一个这么容易它是傻的，但很好，是的。

编辑：我有点忘了提及那一部分，我不想他们被隐藏，我想让每个div自动允许前一个完成它的浓度没有重叠（尝试与溢出：自动，但它给他们滚动条，所有的形式在整个网站。

这里有一张照片，我很肯定你会马上看到这个问题。

imgur/aj8pDaO

以下是相关的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

imgur/aj8pDaO

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">  </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; }