Неправильное растягивание блока с плавающим содержимым

iReD · September 19, 2012

Доброго времени суток,

Дано:

Растягивающийся по содержимому блок(display:inline-block):

Внутри него обтекаемый блок(float:left)

За ним обтекающий блок, который должен растягивать родителя.

Код:

Reveal hidden contents

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Rubber Float Test</title>
<style>
     body {
	 	background-color:#96C
	 }
	.rubber{
		display:inline-block;/*делает блок резиновым*/
		max-width:400px;
		background-color:#099;
	}
	.float{
		float:left;
		width:150px;
		height:150px;
		background-color: #FC3;
	}	
</style>
</head>
<body>
<p>Короткий текст растягивает "резиновый" блок неправильно в Chrome и Firefox:<br />
Opera и IE растягивают правильно:</p>
    <div class="rubber">
          <div class="float">float block</div>
          <div>Lorem <br /> ipsum dolor </div>         
    </div>
<p>Обернув текст в строчный элемент можно получить такой вариант растягивания, тоже неправильный.<br />
   Текст должен был растянуться до размеров второй строки, а растянулся по первой.<br />
   В Opera и IE опять все правильно:</p>
    <div class="rubber">
          <div class="float">float block</div>
          <span>Lorem <br /> ipsum dolor </span>
    </div>
<p>С динным текстом все отображается правильно:</p>
    <div class="rubber">
          <div class="float">float block</div>
          <div>Lorem <br />ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>
</body>
</html>

Проблема:

При небольшом размере текста в обтекающем блоке Chrome и Firefox растягивает родительский блок не правильно. Как правило, короткий текст просто переносится под плавающий блок.

скриншот:

Reveal hidden contents

IE и Opera растягивают родителя правильно.

скриншот:

Reveal hidden contents

Посмотреть вживую можно тут и тут

(по второй ссылке html5 и Firefox его отображает немного по другому)

Нужно найти кроссбраузерную реализацию такой верстки.

Заранее благодарю.

mrnobody · September 19, 2012

Добавьте overflow: hidden;

Скрин:

Reveal hidden contents

iReD · September 19, 2012

On 9/19/2012 at 9:05 AM, mrnobody said:
Добавьте overflow: hidden;

Спасибо.Это заклинание проверял на внешнем блоке, на внутреннем не догадался.

В Хроме проблема частично решилась, но Firefox блок с overflow: hidden отказывается показывать.

После небольшого удлинения текста лиса показала хоть что-то, но неправильно:

<div class="text">Lorem <br /> ipsum dolor ipsum doloripsum dolor</div>

Еще способ не подходит, тк во всех браузерах сбрасывает обтекание:

Sign In

Неправильное растягивание блока с плавающим содержимым

Question

iReD

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

mrnobody

Link to comment

Share on other sites

iReD

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information