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


Автор: NNaarreekk 6.1.2010, 00:00
Привет всем!

Нужно сделать 3 дива в одну строку так чтоб дивы с права и с лева были фиксированной ширины а див посередине занимал все остальное пространство.
Кто нибудь сталкивался с таким?

Единственное что лезет в голову- это JS-ом но чтот не хочется:(

Автор: bars80080 6.1.2010, 00:14
это ж просто:

Код

#left { width: 200px; float: left; }
#right { width: 200px; float: right; }


Код

<div id="left"></div>
<div id="right"></div>
<div id="center"></div>

Автор: Zuzzuk 6.1.2010, 01:53
bars80080, в Вашем примере, если будет много контента в центральном блоке, то он перепрыгнет на другую строчку, если столкнется с правым дивом... (ну или я не знаю, как это исправить smile )

Я так делаю.
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style>
html, body{height:100%; width:100%}
#left{float:left; width:200px;margin-left:-100%;background:blue}
#right{float:left; width:200px;margin-left:-200px;width:200px;background:yellow}
#center{float:left;width:100%; background:red; text-align:center}
#center div{padding:0 200px}
</style>
</head>
<body>
<div id='center'>
    <div>Середина</div>
</div>
<div id='left'>Левая часть</div>
<div id='right'>правая часть</div>
<br clear='all'>
</body>
</html>


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

кстати колонки одинаковой высоты можно поставить, добавив это в css
Код

margin-bottom:-10000px;
padding-bottom:10000px;

Автор: blah 6.1.2010, 12:25
Код

#center{
    overflow:hidden;
    height:1%;
}

+ к примеру bars80080.

Автор: NNaarreekk 6.1.2010, 12:36
bars80080,  blah, СРАБОТАЛО!! smile  smile 

Не думал что так просто будет!!

blah, а можно парой слов объяснить зачем нужен height:1%;???


Zuzzuk, ты прав. Этот метод работает, но думаю что не очень оптимально.


Всем спасибо!!! тему закрываю!

Автор: blah 6.1.2010, 12:46
NNaarreekk,
Для присвоения haslayout в IE.

Автор: NNaarreekk 6.1.2010, 13:28
Опять для IE отдельные презервативы нужны smile 

Автор: Violator 6.1.2010, 14:18
NNaarreekk, 
1) метод предложенный Zuzzuk не требует "контрацептивов" для ИЕ6, можете им воспользоваться
2) можете слегка переделать метод предложенный bars80080 и blah, чтобы избавиться от бага в ИЕ6
Код

    #center { height: 1%; margin: 0 200px; }
    * html #content { position: relative; left: -3px; margin-right: -6px; }

Код

  <div id="center">
    <div id="content"></div>
  </div>

3) можете воспользоваться готовыми решениями http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

Автор: NNaarreekk 6.1.2010, 14:44
Violator, спасибо! IE6 уже вышел из пользования но иногда встречаются люди благодаря которым добавляется работа верстальщикомsmile

Автор: Guedda 25.2.2010, 15:57
Мне необходимо подобное, только в точности да наоборот.
Есть родительский див (ширина на 100% #parent)
в нем находятся в строку три дива (#left, #center, #right)
Мне необходимо, чтобы левый и правый изменялись одинаково при изменении размера центрального. То есть, были по 50%, центральный увеличился на 20%, они стали по 40%. Вообще такое возможно?

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