Home > Article > Web Front-end > DIV CSS Three DIVs are nested in one DIV_html/css_WEB-ITnose
DIV CSS Three DIVs are nested in one DIV_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:13:511834browse
#n { width:960px; height:84px; margin:0 auto; padding:0px; background-color:Green;} #n1 { width:230px; height:84px; margin:0px; padding:0px; float:left; background-color:Red;} #n2 { width:470px; height:84px; margin:0px; padding:0px; float:left; background-color:Yellow;} #n3 { width:200px; height:84px; margin:0px; padding:0px; float:right; background-color:Black;} #f { width:960px; height:70px; margin:0 auto; padding:0px; background-color:Blue; } <div id ="n"> <div id="n1"></div> <div id="n2"></div> <div id="n3"></div> </div> <div id = "f"> </div>
Why div(n1,n2,n3) does not overlap with div(n), but there are both above div(n1,n2,n3) There is a little gap, how to delete it.
Rendering:
Reply to discussion (solution)
The image is incompletely displayed
Right click > in new tab Open the image
or visit the following link:
http://img.my.csdn.net/uploads/201207/23/1343050098_5932.jpg
I don’t know what browser the author uses. There is no exception except that the float is not cleared!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>divtest</title><style type="text/css">/**----------------------------------body styles----------------------------------------**/#n {width:960px; height:84px; margin:0 auto; padding:0px; background-color:Green;} #n1 { width:230px; height:84px; margin:0px; padding:0px; float:left; background-color:Red;} #n2 { width:530px; height:84px; margin:0px; padding:0px; float:left; background-color:Yellow;} #n3 { width:200px; height:84px; margin:0px; padding:0px; float:right; background-color:Black;} #f { width:960px; height:70px; margin:0 auto; padding:0px; background-color:Blue; }.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} *html .clearfix{height:1%;}*+html .clearfix{height:1%;}.clearfix{display:inline-block;} /* Hide from IE Mac */ .clearfix {display:block;} </style></head><body> <div id ="n" class="clearfix"> <div id="n1"></div> <div id="n2"></div> <div id="n3"></div> </div> <div id = "f"> </div></body></html> I don’t know what browser the author uses. There is no exception except that the float is not cleared!
HTML code
707b2bad486eff89e46e18bb49200ea5
bedd61e995f34827a9896c163864a26eQuote Which one is it?
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
* html .clearfix{height:1%;}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
Still the same
360 Speed Browser version number: 5.3.0.922
IE8
Tried both browsers
No exception except that the float is not cleared
It’s strange, the display is normal in IE6, 7, 8, Firefox, Google, Open, and Apple Safari.
It’s strange. When I use IE6, 7, 8, Firefox, Google, Open, and Apple’s Safari, the display is normal.
Support