Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Три блока, из которых только у 2ух известно width
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Три блока, из которых только у 2ух известно width

Страниц (1): [1]
 

1. antobra - 12 Июня, 2012 - 18:05:01 - перейти к сообщению
Подскажите, кто знает.

У нас есть:

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!-- Левая колонка -->
  3. <div style="float: left; width: 200px;"></div>
  4. <!-- Центр -->
  5. <div style="float: left;"></div>
  6. <!-- Правая колонка -->
  7. <div style="float: left; width: 150px;"></div>
  8.  


Из кода понятно, что выглядеть должно как php.su, т.е. слева столбец, справа столбец и по середине основной поле для информации. А мне нужно сделать так, что поле по центру должно растягиваться на широту width страницы. Т.е. левая колонка должна быть 200, правая 150, а по центру растягиваться согласно width странички. Знаю, как это сделать с помощью JS, но хотелось бы узнать: можно ли что-то придумать на CSS?

Спс.
2. voskan - 12 Июня, 2012 - 18:48:19 - перейти к сообщению
можно сделать проще , таблицой

<table>
<td>1</td>
<td>2</td>
<td>3</td>
</table>

задать в боди максимальный размер всей страницы, после установить по краям таблицы размер Улыбка а центр сам определится.
3. antobra - 12 Июня, 2012 - 18:56:48 - перейти к сообщению
voskan, спс, я так думал. Но к сожалению коллеги против Table, все-таки устаревшее. Ищем способы на DIV'ах(
4. voskan - 12 Июня, 2012 - 19:03:04 - перейти к сообщению
таблицы не замедляют ничего Улыбка да и никто в исходный код не смотрит Улыбка) главное хорошее отображение а как ты добился всем пофигу Улыбка
это мое мнение Улыбка удачи в поисках.

http://htmlbook[dot]ru/layout
вот может там найдешь
5. DeepVarvar - 12 Июня, 2012 - 19:18:42 - перейти к сообщению
CODE (text):
скопировать код в буфер обмена
  1. .leftwrapper {
  2.   float: left;
  3.   width: 150px;
  4.   border-right: solid 1px #f00;
  5. }
  6.  
  7. .rightwrapper {
  8.   float: right;
  9.   width: 200px;
  10.   border-left: solid 1px #00f;
  11. }
  12. .container {
  13.   margin: 0 200px 0 150px;
  14. }

CODE (html):
скопировать код в буфер обмена
  1. <div class="leftwrapper"></div>
  2. <div class="rightwrapper"></div>
  3. <div class="container"></div>
6. voskan - 12 Июня, 2012 - 19:31:06 - перейти к сообщению
DeepVarvar

флоат иногда с мобильников плохо отображается.
7. DelphinPRO - 12 Июня, 2012 - 19:52:34 - перейти к сообщению
voskan пишет:
главное хорошее отображение а как ты добился всем пофигу

не всем. Блочный код легче поддерживать и расширять. DIV-ная верстка это не только модно, но и практично.
8. DeepVarvar - 12 Июня, 2012 - 19:58:02 - перейти к сообщению
voskan пишет:
флоат иногда с мобильников плохо отображается
Конкретный пример в студию.
(Добавление)
Для моей разметки.
9. DelphinPRO - 12 Июня, 2012 - 19:59:49 - перейти к сообщению
voskan, код приведенный DeepVarvarом - пожалуй самый популярный в сети для трех колонок
10. antobra - 14 Июня, 2012 - 09:34:32 - перейти к сообщению
DeepVarvar, отличный способ. Потратил время, поискал в интернете другие варианты и этот реально самый лучший и простой способ. Только мне потребовалось в центральный контейнер выставить width: auto, иначе он вылазил и проходил сквозь правую колонку.

Вам плюсик в Помог)))
11. DeepVarvar - 14 Июня, 2012 - 10:17:43 - перейти к сообщению
antobra пишет:
иначе он вылазил и проходил сквозь правую колонку
правый марджин надо было нарулить.
(Добавление)
antobra пишет:
width: auto
Оно по умолчанию таковым является.
12. tuareg - 14 Июня, 2012 - 11:56:33 - перейти к сообщению
А чем вам это не нравится?
http://csstemplater[dot]com/

 

Powered by ExBB FM 1.0 RC1