Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Вопрос по верстке (https://javascript.ru/forum/xhtml-html-css/10136-vopros-po-verstke.html)

Riim 21.06.2010 10:04

Вопрос по верстке
 
<div style="width: 200px; height: 100px; background: #ff9; overflow: auto;">
<div style="height: 25px; background: #f99;"></div>
<div style="height: 25px; background: #99f;">text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text</div>
</div>


если проскроллить, то видно, что текст вываливается из синего блока. Можно ли без таблиц сделать, что бы оба внутренних дива занимали всю ширину, учитывая скролл? Ширину в px внутренним блокам устанавливать нельзя, т. к. текст разной длинны.

зы: подозреваю, что никак, но все же.

Riim 21.06.2010 10:10

Цитата:

Сообщение от Skipp
А если ширину эти блокам в 100% указать?

неа, первое, что я попробовал.

Skipp 21.06.2010 10:12

Riim,
Уже сам проверил)
Тоже помучаюсь, если будет результат отпишусь)

Skipp 21.06.2010 10:14

Riim,
float: left; к блоку с текстом, решил эту проблему)
Проверил на ie6-8, ff3.6 работает.

Riim 21.06.2010 10:33

Цитата:

Сообщение от Skipp
float: left; к блоку с текстом, решил эту проблему

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

subzey 21.06.2010 12:59

Ну, в принципе, два варианта, почти одинаковых.
<div style="width: 200px; height: 100px; background: #ff9; overflow: auto;">
	<div style="float: left">
		<div style="height: 25px; background: #f99;"></div>
		<div style="height: 25px; background: #99f;">text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text</div>
	</div>
</div>

<div style="width: 200px; height: 100px; background: #ff9; overflow: auto;">
	<div style="display: inline-block">
		<div style="height: 25px; background: #f99;"></div>
		<div style="height: 25px; background: #99f;">text_text_text_text_text_text_text_text_text_text_text_text_text_text_text_text</div>
	</div>
</div>


Для IE6 вместо [var]inline: block[var] ставим zoom: 1

Riim 21.06.2010 14:51

Цитата:

Сообщение от subzey
Ну, в принципе, два варианта, почти одинаковых.

что-то я все-таки недопонимаю в верстке.

UPD: дошло наконец: второй див из-за float:left растягивается под текст, а внутренние дивы растягиваются под него. Красиво.


Часовой пояс GMT +3, время: 01:56.