Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > 3 дива в строке


Автор: artsb 22.7.2009, 10:14
Всем привет!

Есть див. Внутри него три дива в строку. 2-ой див имеет статическую ширину. Его нужно расположить по центру. 1-ый и 3-ий должны занимать всё оставшееся место слева и справа соответственно.

Есть очень много информации о том как сделать крайние дивы статического размера, а центральный будет растягиваться. А по моему вопросу ничего не нашёл :(

Автор: LolensSmith 22.7.2009, 13:09
Сам задумался над этим вопросом, и лучше чем

Код

<div>
<center>
  <div style="float: left; border: 1px solid #000000;"> LEFT </div>
  <div> 
    <div style="float: right; border: 1px solid #000000;">RIGHT</div>
    <div style="width: 200px; border: 1px solid #000000;">CENTER</div>
    
  </div>
</center>
</div>

<div>


придумать не смог. Я не уверен что это подойдет, так как при изменении размеров слева и справа, center становится совсем не в центре.

p.s. А почему бы не попробывать с table.
Код


<!-- // Уберите border=1 чтобы убрать границы. // -->
<!-- // cellpadding=0 и cellspacing=0 уберает отступы между ячейками, что придает подобие слоям. // -->
<!-- // width="100%" - размер таблицы в ширину = 100% // -->
<!-- // Если убрать бордер, то по моему не чем не отличить от div'ов // -->

<table border=1 cellpadding=0 cellspacing=0 width="100%">
<!-- // Пример 1 // -->
 <tr>
  <td align="left"> Размещено с лева, размер не имеет значения </td>
  <td align="center" width="200px"> Размещено по центру с размерами в ширину 200 px. </td>
  <td> Размещено с права, размер не имеет значения </td>
 </tr>

<!-- // Пример 2 // -->
 <tr>
  <td align="left"> Размещено с лева, размер не имеет значения </td>
  <td align="center" width="200px"> Размещено по центру с размерами в ширину 200 px. </td>
  <td align="right"> Размещено с права, размер не имеет значения </td>
 </tr>

</table>  


Получится тоже самое что и с дивами только другими тегами...

Автор: artsb 22.7.2009, 14:11
LolensSmith, спасибо.

Я тоже пробовал таблицу сделать. И сразу споткнулся об IE... После того, как делаю для всех (3-ёх) ячеек padding: 0, в IE 1-ый и 3-ий столбцы исчезают. Пришлось добавить пробелы. Вроде, всё норм. Это, вообще, как-нибудь лечится?

Автор: LolensSmith 22.7.2009, 14:42
Если я тебя правильно понял, то вот код как правильно пишется...
&nbsp; - заменяет пробел smile. Так же еще по-моему делают прозрачный gif размерами 1x1, и вставляют код картинки в ячейку.

Код

<table border=1 cellpadding=0 cellspacing=0 width="100%">
 <tr>
  <td align="left" valign="top"> &nbsp; </td>
  <td align="center" width="200px" valign="top"> &nbsp; </td>
  <td valign="top"> &nbsp; </td>
 </tr>
</table> 


А для чего делать padding: 0; если cellpadding=0 cellspacing=0 итак делает отступ 0px??

p.s. добавил в код valign="top". Он распологает содержимое ячейки в верху. По стандарту в браузерах идет по центру.

Допустим если ширина ячейки 3 будет на много больше чем 1. то в ячейке 1 текст будет распалагаться на уравне центра ячейки 3. Впрочем valign="top" это исправляет.

p.s.s. Поэксперементируй с cellpadding=0 cellspacing=0, поймешь что они делают. Сделай к примеру cellpadding="5px" cellspacing="10px" или больше...

Автор: artsb 22.7.2009, 14:59
Цитата(LolensSmith @  22.7.2009,  14:42 Найти цитируемый пост)
делают прозрачный gif

Я заюзал &nbsp;

Цитата(LolensSmith @  22.7.2009,  14:42 Найти цитируемый пост)
А для чего делать padding: 0;

Привычка. Стараюсь всё делать css средствами. Хотя может cellpadding=0 поможет...

Цитата(LolensSmith @  22.7.2009,  14:42 Найти цитируемый пост)
поймешь что они делают

это то я знаю smile Я просто думал, что есть способ сделать это дивами.

Автор: WebDisaster 22.7.2009, 15:08
Цитата(artsb @  22.7.2009,  10:14 Найти цитируемый пост)
Есть очень много информации о том как сделать крайние дивы статического размера, а центральный будет растягиваться. А по моему вопросу ничего не нашёл :( 


artsb, в Вашем случае всё делается точно также, только наоборот =)

Код

<!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=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">
* {padding:0; margin:0;}
#first {
    width: 50%;
    margin-right: -51px;
    float: left;
    background-color:#0f0;
}
#second {
    width: 50%;
    margin-left: -51px;
    float: right;
    background-color: #00f;
}
#third {
    width: 100px;
    background-color: #fff;
    border: 1px solid #f00;
    float:left;
}
</style>

</head>

<body>
    <div id="wrapper">
        <div id="first">1</div>
        <div id="second">2</div>
        <div id="third">3</div>
    </div>
</body>
</html>

(бордеры и бэкграунды добавлены, чтобы были видны блоки)

Автор: LolensSmith 22.7.2009, 15:17
Пробывал на Opera 9.64, Боковые div'ы "Прячутся" под центральным...

Автор: artsb 22.7.2009, 15:23
WebDisaster, спасибо. Единственное, 2-ку не видно smile ...

Не подскажете сразу, как вытянуть див внутри другого дива по высоте. Если поставить height: 100%, в FF его высота становится равной высоте экрана (???), а в IE - ничего...

Автор: WebDisaster 22.7.2009, 15:28
Цитата(artsb @  22.7.2009,  15:23 Найти цитируемый пост)
Не подскажете сразу, как вытянуть див внутри другого дива по высоте. Если поставить height: 100%, в FF его высота становится равной высоте экрана (???), а в IE - ничего... 

artsb, высота любого блока считается браузером в %% от высоты внешнего бочного элемента. Т.е. нужно задавать необходимую высоту и для всех внешних блоков.

Цитата(artsb @  22.7.2009,  15:23 Найти цитируемый пост)
Единственное, 2-ку не видно 

А как должно быть? Не имея в руках конкретной задачи затрудняюсь что-либо сказать.

Убежал...

Автор: artsb 22.7.2009, 16:54
Цитата(WebDisaster @  22.7.2009,  15:28 Найти цитируемый пост)
А как должно быть?

Должно быть видно smile

Кстати, меня устраивает вариант с таблицей. Единственный косяк, который сейчас заметил, это то, что при уменьшении ширины окна браузера, средняя ячейка таблицы уменьшается. Пробовал ставить overflow: hidden и таблице и всем ячейкам. Не помогает...

Автор: WebDisaster 22.7.2009, 17:31
Цитата(artsb @  22.7.2009,  16:54 Найти цитируемый пост)
Должно быть видно 

Что будет внутри "резиновых" блоков? Текст? Картинка? Другие блоки? 
Что будет внутри среднего "фиксированного" блока? От этого зависит, что советовать. 
В примере ниже, например, обрезаться ничего не будет. Но я не представляю, подходит ли это Вам. Существенные условия задачи остались неизвестными.

Код

<!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=windows-1251" />
<title>Untitled Document</title>

<style type="text/css">
* {padding:0; margin:0;}
#first {
    width: 50%;
    margin-right: -51px;
    float: left;
    background-color:#0f0;
}
#first * {
   margin-right: 60px; background-color: #fff;
} 
#second {
    width: 50%;
    margin-left: -51px;
    float: right;
    background-color: #00f;
}
#second * {
   margin-left: 60px; background-color: #fff;
} 
#third {
    width: 100px;
    background-color: #fff;
    border: 1px solid #f00;
    float:left;
}
</style>

</head>

<body>
    <div id="wrapper">
        <div id="first"><p>1</p></div>
        <div id="second">2</div>
        <div id="third"><p>3</p></div>
    </div>
</body>
</html>

Автор: artsb 22.7.2009, 18:12
WebDisaster, я вас понял. Значит так. Я делаю footer. Это див, в котором три дива. Центральный фиксированный - это продолжение самой страницы. Крайние дивы должны занимать всё оставшееся место. Все три дива имеют бекграунды. В центральном будут дивы. Крайние пустые.

А у вас нет мыслей по поводу таблицы?..

Автор: WebDisaster 22.7.2009, 18:37
Цитата(artsb @  22.7.2009,  18:12 Найти цитируемый пост)
Крайние пустые.... Все три дива имеют бекграунды.

repeat-x?
repeat-y?
no-repeat?

Я думаю, что проблему "видимости" бэкграунда можно будет решить его позиционированием, даже не добавляя дополнительных блочных элементов. Примерно так: 

#second {
   background: transparent url(../images/page-bg.png) repeat-y 50% 45px;
}

А если увидеть макет, то возможно окажется, что эти "боковые резиновые" блоки вообще не нужны, а бэкграунд repeat-y можно позиционировать прямо в <body>

http://www.htmlbook.ru/css/background-position.html

Цитата(artsb @  22.7.2009,  18:12 Найти цитируемый пост)
А у вас нет мыслей по поводу таблицы?.. 

Если Вас интересует моё мнение, то я сторонник семантики: таблица предназначена для хранения табличных данных, а не для позиционирования элементов. Но я не собираюсь никому своё мнение навязывать (или даже убеждать =). Делайте так, как считаете нужным.

Автор: artsb 22.7.2009, 20:49
Цитата(WebDisaster @  22.7.2009,  18:37 Найти цитируемый пост)
repeat-x?
repeat-y?
no-repeat?

Я довольно хорошо знаю css. smile С этим проблем нет. 
Цитата(WebDisaster @  22.7.2009,  18:37 Найти цитируемый пост)
А если увидеть макет, то возможно окажется, что эти "боковые резиновые" блоки вообще не нужны, а бэкграунд repeat-y можно позиционировать прямо в <body>

Неа. Не получится. Слева и справа разные бэкгроунды.

Автор: Itsys 23.7.2009, 06:29
Цитата(artsb @  22.7.2009,  16:54 Найти цитируемый пост)
Единственный косяк, который сейчас заметил, это то, что при уменьшении ширины окна браузера, средняя ячейка таблицы уменьшается. Пробовал ставить overflow: hidden и таблице и всем ячейкам. Не помогает... 

Это решается вставкой прозрачного однопиксельного gifa растянутого на всю ширину ячейки, в этом случае ячейка не уменьшится меньше этих размеров.

Автор: artsb 23.7.2009, 11:32
Itsys, спасибо. Уже разобрался.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)