Ширина в процентах относительно плавающего блока

dm53 · March 3, 2010

Имеется следующая структурка (максимально упрощенный вариант):

<!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>
  <style type="text/css">
.item {border: solid 1px red; float: left}
</style>
</head>
 <body>
<div class="item">
<div>ололоололоололоололо</div>
<div>
   <div style="float: left; width: 50%">123</div>
   <div style="float: left; width: 50%">321</div>
</div>
</div>
</body>
</html>

Должна быть строка, под которой располагается 2 блока половинной ширины. В Опере и Фоксе работает как надо, ИЕ6 считает 50%, видимо, от body. Если item задать жесткий размер, то все хорошо, но задание жесткого размера мне не особо подходит. Побороть пока что удалось лишь таблицами, но хотелось бы найти более элегантное решение. Есть у кого-нить идеи?

Заранее спасибо за помощь!

psywalker · March 4, 2010

Попробуй так

<div>ололоололоололоололо</div>

<div>

</div>

Zippovich · March 4, 2010

<div style="display: inline-block; position: relative">
	ололоололоололоололо
	<div>
		<div style="float: left; width: 50%">123</div>
		<div style="float: left; width: 50%">321</div>
	</div>
	<div style="clear:both"></div>
</div>

dm53 · March 5, 2010

psywalker, спасибо, но решение логически бессмысленно, что подтверждается экспериментом.

Zippovich, спасибо, но в IE6 элементы не ведут себя как float, т. е. при двух таких блоках следующий располагается на новой строке, а не рядом.

Zippovich · March 5, 2010

Для ie6:

<div style="display: inline; position: relative">
	ололоололоололоололо
	<div>
		<div style="float: left; width: 50%; display: inline">123</div>
		<div style="float: left; width: 50%; display: inline">321</div>
	</div>
	<div style="clear:both"></div>
</div>

dm53 · March 5, 2010

Данное решение разносит слой на всю ширину страницы, что, конечно же, неприемлемо.

Sign In

Ширина в процентах относительно плавающего блока

Question

dm53

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

Zippovich

Link to comment

Share on other sites

dm53

Link to comment

Share on other sites

Zippovich

Link to comment

Share on other sites

dm53

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information