我想保留父div中的所有内容,但是第二个div出去了,好像开始一个新行,我无法弄明白.有人可以告诉我为什么>
谢谢.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div style="border:1px solid #000;">
<h3>Title</h3>
<p>Everything here expands with the parent div but the div just below this paragraph tag will not expand.</p><br />
<div>
<span style="float:left; width:49%; border:1px solid #000;">
Book<br />
<select id="book" name="book">
<option value="">Select..</option>
</select>
</span>
<span style="float:right; width:49%; border:1px solid #000;">
Chapter<br />
<input type="text" id="chapter" name="chapter" />
</span>
</div>
</div>
</body>
</html>
这些是新的更改并正确呈现.请看看我是否遗漏了其他任何东西.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<div style="border:1px solid #000;">
<h3>Title</h3>
<p>Everything here expands to the parent div but the div just below this paragraph tag will not expand.</p><br />
<div>
<span style="float:left; width:49%; border:1px solid #000;">
Book<br />
<select id="book" name="book">
<option value="">Select..</option>
</select>
</span>
<span style="float:right; width:49%; border:1px solid #000;">
Chapter<br />
<input type="text" id="chapter" name="chapter" />
</span>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
我将以下样式添加到包含浮动div的div:
overflow: hidden;
zoom: 1;
溢出设置确保它完全包装其浮动子div并且缩放设置适用于IE浏览器,以使其进入"hasLayout"模式.使用特殊的空div clear:both是一种相当丑陋,过时的方法,可确保您拥有正确的布局.
这里有一篇关于这个主题的优秀文章:http:
//www.quirksmode.org/css/clearing.html
虽然文章width: 100%用来达到同样的目的.