为什么我的第二个div超出了第一个div？

I want to keep everything within the parent div but the second div goes outside, as if starting a new row and I can't figure this out. Can someone please tell me why>

我想保留父div中的所有内容,但是第二个div出去了,好像开始一个新行,我无法弄明白。有人可以告诉我为什么>

Thanks.

<!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>

These are the new changes and renders correctly. Please see if I am missing anything else.

这些是新的更改并正确呈现。请看看我是否遗漏了其他任何东西。

<!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>

2 个解决方案

#1

I would add the following styles to the div that contains the floating divs:

我将以下样式添加到包含浮动div的div:

overflow: hidden;
zoom: 1;

The overflow setting ensures it fully wraps its floating child divs and the zoom setting is for IE browsers, to kick them into "hasLayout" mode. Using special empty divs with clear:both is a rather ugly, dated way of ensuring you have the correct layout.

溢出设置确保它完全包装其浮动子div并且缩放设置适用于IE浏览器,以使其进入“hasLayout”模式。使用带有clear的特殊空div:两者都是一种相当丑陋,过时的方法,可确保您拥有正确的布局。

There is an excellent article on the subject here: http://www.quirksmode.org/css/clearing.html although the article uses width: 100% to achieve the same end.

这里有一篇关于这个主题的优秀文章:http://www.quirksmode.org/css/clearing.html虽然文章使用宽度:100%来达到同样的目的。

#2

Since you’ve used float, that container has zero height as far as the parent container is concerned. To change that, put an extra dummy tag just before the end of the parent div:

由于您已经使用了float,因此就父容器而言,该容器的高度为零。要更改它,请在父div结束之前添加一个额外的虚拟标记:

<div style="clear: both;"> </div>

#1