Почему мой второй div выходит за пределы первого div? - PullRequest
Новая
       4

Почему мой второй div выходит за пределы первого div?

2 голосов
/ 02 ноября 2009

Я хочу сохранить все в родительском 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>

Ответы [ 2 ]

7 голосов
/ 02 ноября 2009

Я бы добавил следующие стили к div, который содержит плавающие div: 

overflow: hidden;
zoom: 1;

Параметр переполнения гарантирует, что он полностью оборачивает свои плавающие дочерние элементы div, а параметр масштабирования - для браузеров IE, чтобы перевести их в режим hasLayout. Использование специальных пустых элементов div с clear:both - довольно уродливый устаревший способ убедиться, что у вас правильная компоновка.

Здесь есть отличная статья на эту тему: http://www.quirksmode.org/css/clearing.html хотя статья использует width: 100% для достижения той же цели.

1 голос
/ 02 ноября 2009

Поскольку вы использовали float, этот контейнер имеет нулевую высоту относительно родительского контейнера. Чтобы изменить это, поместите дополнительный фиктивный тег непосредственно перед концом родителя div: 

<div style="clear: both;"> </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...