css for div与浮动的div重叠？

我几乎是一个初学者，我试图找出为什么我的CSS不正常工作。问题是，我设置背景颜色为绿色的ID与ID＃zona6，但颜色适用于与ID＃zona2和＃zona3的div。css for div与浮动的div重叠？

但是，背景颜色与id＃zona6的div具有相同的比例，并且在chrome检查元素中，div看起来就是该颜色的位置，但其中的文本位于＃zona4下方和＃zona5，它应该是......我重新检查了所有div的显示和位置，它们都被设置为相对和块。另外，当我在body元素中键入东西时，div＃zona6中的文本与它重叠（这很明显，因为div＃zona6实际上与＃zona2和＃zona3重叠）。

我也在Internet Explorer中测试过它，我仍然无法找到问题，它一定很简单，但我不明白。

#zona1 { 
 
    height: 15%; 
 
} 
 
#zona2 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
#zona3 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona4 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#zona5 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona6 { 
 
    height: 15%; 
 
    background-color: green; 
 
}

<div id="zona1"> 
 
    vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb 
 
    twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
</div> 
 
<div id="zona2"> 
 
    vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
</div> 
 
<div id="zona3"> 
 
    ntrbrt 
 
</div> 
 
<div id="zona4"> 
 
    htrrwt 
 
</div> 
 
<div id="zona5"> 
 
    hb5ynyre 
 
</div> 
 
<div id="zona6"> 
 
    hh3653gterbwtebt 
 
</div>

的index.css文件是空的。

来源

2017-02-14 Marc Spataru

这是因为，你正在使用％没有固定像素的高度。根据元素内的内容计算百分比。要么放置相同的内容或PX的高度。 –

只需添加一个Clear:both;到#zona6这样，它不会漂浮到最近的浮
这里是一个jsfiddle

来源

2017-02-14 18:14:37

谢谢！有效。 –

由于您对某些div使用了浮点值，因此应该将float应用于其余的div。由于您没有给出任何浮动值#zona6，它会自动将自己置于#zona1这就是为什么你看到div #zone6与其他人重叠。提供float: left和width: 100%使用float属性时使其下降

<html> 
 

 
<head> 
 
    <style> 
 
     #zona1 { 
 
      height: 15%; 
 
      float: left; 
 
     } 
 
     
 
     #zona2 { 
 
      height: 35%; 
 
      float: left; 
 
      width: 50%; 
 
      background-color: blue; 
 
     } 
 
     
 
     #zona3 { 
 
      height: 35%; 
 
      float: right; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona4 { 
 
      height: 35%; 
 
      float: left; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona5 { 
 
      height: 35%; 
 
      float: right; 
 
      width: 50%; 
 
     } 
 
     
 
     #zona6 { 
 
      height: 15%; 
 
      background-color: green; 
 
      width: 100%; 
 
      float: left; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="zona1"> 
 
     vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
    </div> 
 
    <div id="zona2"> 
 
     vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
    </div> 
 
    <div id="zona3"> 
 
     ntrbrt 
 
    </div> 
 
    <div id="zona4"> 
 
     htrrwt 
 
    </div> 
 
    <div id="zona5"> 
 
     hb5ynyre 
 
    </div> 
 
    <div id="zona6"> 
 
     hh3653gterbwtebt 
 
    </div> 
 
</body> 
 

 
</html>

来源

2017-02-14 18:11:38 Nitheesh

你需要应用clearfix技术。应用后的那些部件谁是“浮动”

然后clearfix类，包括在你的CSS如下：

.clearfix:after { 
    content: ''; 
    display: block; 
    clear: both; 
}

一些帮助，可以发现here（葡萄牙语）

来源

2017-02-14 18:12:14

您所看到的绿色背景因为你在＃zona4和＃zona5上留下了浮动属性。浮动将这些元素移动到典型文档流之外，并且绿色背景填充在它们后面，所以它们本身并不具有绿色背景。一个clearfix应该给你你想要的效果。这只是一个例子，其中花车可以奇怪的方式行事。

有一件事可以帮助你很多，是能够使用检查元素单独查看每个CSS属性的效果。如果您使用的是Chrome，请右键单击页面并选择检查选项，然后单击页面上的html元素以查看右侧的CSS属性。您可以开启和关闭每个CSS属性来查看它的效果。 -Alyssa

来源

2017-02-14 18:15:27

解决起来很简单。它的行为如此，因为未设置display。只需添加display: inline-block即可使其行为如同...块;）

#zona1 { 
 
    height: 15%; 
 
} 
 
#zona2 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
    background-color: blue; 
 
} 
 
#zona3 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona4 { 
 
    height: 35%; 
 
    float: left; 
 
    width: 50%; 
 
} 
 
#zona5 { 
 
    height: 35%; 
 
    float: right; 
 
    width: 50%; 
 
} 
 
#zona6 { 
 
    height: 15%; 
 
    background-color: green; 
 
    /* display: block; */ /* to make it appear on the next line. */ 
 
    display: inline-block; 
 
}

<div id="zona1"> 
 
    vrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre e brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre bwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb we brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb 
 
    twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtr 
 
</div> 
 
<div id="zona2"> 
 
    vbrebrevrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbttrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb wtrbrtbtrvrteb twreb wtre brtwb 
 
</div> 
 
<div id="zona3"> 
 
    ntrbrt 
 
</div> 
 
<div id="zona4"> 
 
    htrrwt 
 
</div> 
 
<div id="zona5"> 
 
    hb5ynyre 
 
</div> 
 
<div id="zona6"> 
 
    hh3653gterbwtebt 
 
</div>

我希望它帮助:)

来源

2017-02-14 18:18:49 Evochrome

css for div与浮动的div重叠？

回答

相关问题