[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Две колонки в резиновом блоке
Guest
Html

<div class="main_block">
<div
class="left">
<img
src="#" width="100" height="100" alt=""/>
</div>
<div
class="right">sasdfasdfasdfasf</div>
<div
class="clear"></div>
</div>


css

.left {
float:left;
background-color:blue;
width: 30%;
}
.right {
float: right;
}


Блок main_block резиновый. Нужно, чтобы в нем было две колонки: left - 100px в ширину, а правый - все остальное, т.е. резиновый. Как сделать? Приведенный мной вариант не работает. Работает только с заданными в процентах ширинами обоих внутренних блоков.



Спустя 2 минуты, 14 секунд (21.01.2011 - 22:47) inpost написал(а):
Родительский DIV = ставь ширину 100%. Теперь относительно родительского ставь размеры. Ты показываешь width:30%, а сам говоришь, что px не работают.

Спустя 16 минут, 5 секунд (21.01.2011 - 23:04) Гость_User написал(а):
Ошибка.

.left {
float:left;
background-color:blue;
width: 100px;
}
.right {
float: right;
}

Спустя 3 минуты, 58 секунд (21.01.2011 - 23:07) inpost написал(а):
Всё работает! http://inpost.dp.ua/8/ooo.php

Спустя 3 минуты, 21 секунда (21.01.2011 - 23:11) Гость_User написал(а):
Родительский блок - резиновый нужен.

Спустя 3 минуты, 27 секунд (21.01.2011 - 23:14) inpost написал(а):
И? Открывай ещё раз: http://inpost.dp.ua/8/ooo.php

Спустя 9 минут (21.01.2011 - 23:23) Гость_User написал(а):
Так, еще раз, полный код:

<div class="main_block1">

<div
class="left1">
<img
src="#" width="100" height="100" alt=""/>
</div>

<div
class="right1">sasdfakjhs flkjhsad lfkjff</div>

<div
class="clear"></div>

</div>


и

.left1 {
float:left;
background-color:blue;
width: 100px;
}
.right1 {
background-color: green;
float: left;
}
.clear {
clear:both;
}

Если текста в right1 меньше, чем ширина строки в данный момент, то все работает верно, если больше, то текст перемещается вниз за границы изображения и размещается во всю ширину главного блока.

Спустя 7 минут, 17 секунд (21.01.2011 - 23:31) inpost написал(а):
Покажи скрин-шот.

Спустя 1 минута, 16 секунд (21.01.2011 - 23:32) Гость_User написал(а):
Больше текста на правой стороне.

Спустя 2 минуты, 23 секунды (21.01.2011 - 23:34) inpost написал(а):
http://inpost.dp.ua/8/ooo.php - ещё больше?

Спустя 17 секунд (21.01.2011 - 23:34) Гость_User написал(а):
Вот! Тоже вылезло.

Спустя 1 минута, 3 секунды (21.01.2011 - 23:36) Гость_User написал(а):
Браузер Google Chrome 8.0.552.237

Спустя 16 минут, 7 секунд (21.01.2011 - 23:52) Гость_User написал(а):
И еще сюда же, касаемо этого же блока.

<ul style="list-style:none;">
<li
style="background-color:red; list-style:none;"><img src="http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50" width="100" height="100" alt=""/><li>
</ul>


Элемент списка должен быть по высоте размером с изображение, но он больше. Вопрос почему?

Спустя 8 минут, 39 секунд (22.01.2011 - 00:00) inpost написал(а):
Гость_User
Спасибо, не знал, долго искал проблему, смотри решение фикса: http://inpost.dp.ua/8/ooo.php

Спустя 5 минут, 38 секунд (22.01.2011 - 00:06) Гость_User написал(а):
Не за что.

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

Спустя 1 минута, 48 секунд (22.01.2011 - 00:08) inpost написал(а):
У меня растягивает: ИЕ, Опера, Мозилла!

Спустя 14 минут, 41 секунда (22.01.2011 - 00:22) Гость_User написал(а):
Хотя нет, все работает если вставить в нормальную разметку с doctype и пр. прелестями структуры html документа.
Спасибо.

Остается открытым второй вопрос в теме.

Спустя 1 минута, 41 секунда (22.01.2011 - 00:24) Гость_User написал(а):
Без остальной разметки, как у тебя на странице, не растягивает. Но в таком виде оно и не надо )
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.