простой div, содержащий span, не будет иметь правильный размер - PullRequest
Новая
       0

простой div, содержащий span, не будет иметь правильный размер

12 голосов
/ 10 апреля 2010

Я думал, что достаточно разбираюсь в CSS, но эта простая проблема ставит меня в тупик.

образец текста

приводит к тому, что высота div меньше высоты диапазона, если диапазон имеет отступ.

Я понимаю, что есть способы использовать «float» для правильного определения размера div, но всегда кажется, что float вызывает нежелательные побочные эффекты.

Нет ли простого простого способа определить размер элемента в соответствии с его содержимым? Кажется довольно простой для меня. Может быть, я что-то упустил.

Ответы [ 2 ]

11 голосов
/ 12 апреля 2010

В базовом случае просто используйте display: inline-block для диапазона.

Вот мой тестовый пример (работает в FF, Chrome и IE 6-8): 

<!DOCTYPE HTML>
<html>
<head>
    <title>Span padding test</title>
</head>
<body>
    <div style="background-color: yellow; border: 1px solid red;">
        <span style="padding: 50px; display: inline-block;">test</span>
    </div>
</body>
</html>

Причина, по которой добавление float: left к div и span исправляет это, заключается в том, что плавающий встроенный элемент неявно преобразует его в блочный элемент. Если вы не знакомы с нюансами между элементами div и span (то есть различием между блочными и встроенными элементами), чтение http://www.maxdesign.com.au/articles/inline/ должно помочь.

Есть несколько других способов решить эту проблему, но трудно сказать, какой из них лучше, не зная больше об остальной разметке и стилях.

3 голосов
/ 11 апреля 2010

Добавьте overflow:auto к делению.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...