Why does a div with display:none break formatting?
The HTML code below consistently results in TEXT A and TEXTB not being horizontally aligned but removing <div style="display:none;"> </div> fixes the alignment. I discovered that using div elements instead of p elements fixing this issue, but am wondering what is actually going on. I saw this behavior in in Opera, Firefox, IE (IE actually puts TEXTB on a separate line), and Chrome.
My expectation was that a div with display:none would not have any impact on formatting.
<html>
<body>
<div style="border-top-style: solid;">
<p style="float:left; width:280px;">
TEXT A<div style="display:none;"> </div>
</p>
<p style="float:left;">
TEXTB
</p>
</div>
&开发者_如何学Pythonlt;/body>
</html>
div is not a valid child of p, so the browser applies error correction to the HTML to end up with this:
<div style="border-top-style: solid;">
<p style="float:left; width:280px;">
TEXT A</p><div style="display:none;"> </div>
<p></p>
<p style="float:left;">
TEXTB
</p>
</div>
(HTML taken from Chrome's Inspector)
Note the extra p element.
First off, you can't put a 'div' inside a 'p'. So use a 'span' instead and see what happens
加载中,请稍侯......
精彩评论