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


Автор: t77 27.10.2010, 00:33
Доброе время суток.

Код

<body>
    <div>
        <div style="background-color:green; width:250px; height:250px; float:right; border: 1px solid Black;">    
        </div>
        <div style="background-color:red; width:250px; height:250px; border: 1px solid Black;">
        </div>
    </div>    
</body>


Вопрос; как с помощью CSS поставить два дива в центральной части страницы, один рядом сдругим, и чтобы между ними было расстояние скажем в 20 px. ?

Автор: ayax2005 27.10.2010, 01:30
как-то так
Код

<body>
    <div style="text-align: center;">
        <div style="background-color:green; width:250px; height:250px; border: 1px solid Black; display: inline-block; margin-right: 10px;">    
        </div>
        <div style="background-color:red; width:250px; height:250px; border: 1px solid Black; display: inline-block;margin-left: 10px;">
        </div>
    </div>    
</body>

Автор: FightInGlory 27.10.2010, 09:50
Если я вас правильно понял, то вам надо два блока по середине экрана не зависимо от разрешения. Если это так, то вот вам пример.
Код

*{
    padding:0;
    margin:0;
}
.block{
    width:100%;
}
.l-block{
    position:relative;
    left:50%;
    float:left;
}
.cont{
    float:left;
    position:relative;
    right:50%;
    width:200px;
    height:200px;
    margin-right:20px;
    border:1px solid red;
}

<div class="block">
    <div class="l-block">
        <div class="cont"></div>
        <div class="cont"></div>
    </div>
</div>

Автор: t77 27.10.2010, 11:25
Оба примера рабочии... smile 
Результат у обоих примеров один и тотже.
Какой из вышеприведенных примеров предподчтительнее..??
Пример ayax2005-а, на мой взгляд проще.
Спасибо

Автор: FightInGlory 27.10.2010, 12:07
Проще и к тому же не работает в ИЕ 7 и 6.

Автор: ayax2005 27.10.2010, 13:10
FightInGlory совершенно прав. Свойство inline-block не поддерживается ###браузерами.

Автор: Violator 28.10.2010, 00:08
ayax2005, 
Поддерживаются, но для изначально инлайн-элементов
Поменяйте в своем примере внутренние div на span

Автор: SelenIT 28.10.2010, 00:12
А для изначально неинлайновых замечательно эмулируется комбинацией display:inline + hasLayout в любом виде (чаще всего zoom:1). Так что разметку можно не менять.

Автор: Rayled 7.11.2010, 11:56
Или я чего-то не понимаю или почему бы вот так не сделать. Вроде как попроще, без хаков и кроссбраузерно:

Код

<div style="width:420px; margin:0 auto">
 <div style="width:200px; height:200px; background:red; float:left"></div>
 <div style="width:200px; height: 200px; background:green; float:right"></div>
</div>

Автор: FightInGlory 8.11.2010, 10:31
2 Rayled, данный способ подходит лишь в том случае, если знаешь ширину блока(экрана пользователя). Способы которые приведены выше работают одинаково при любом разрешении или при любой ширине блока, позиционирую два блока по середине экрана(блока).

Автор: Rayled 8.11.2010, 12:21
Цитата(FightInGlory @  8.11.2010,  10:31 Найти цитируемый пост)
данный способ подходит лишь в том случае, если знаешь ширину блока(экрана пользователя)

Скажите, при каком разрешении данный код не будет ставить блоки по центру? По-моему эти три DIV всегда будут по центру родителя стоять и не важно задана у родителя ширина или нет. Кстати ширина дива с 420px установлена для того, чтобы регулировать расстояние между внутренними блоками без всяких margin,
поэтому только в одном случае пример не будет работать. Если неизвестна ширина ВНУТРЕННИХ блоков, а никак не экрана или родителя, но она-то как раз известна...
Код

<!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=utf-8">
  <title></title>
 </head>
 <body>
  <div style="width:420px; margin:0 auto">
   <div style="width:200px; height:200px; background:red; float:left"></div>
   <div style="width:200px; height: 200px; background:green; float:right"></div>
  </div>
</body>
</html>

Автор: FightInGlory 8.11.2010, 18:55
Вы не понимаете, у вас контейнеры фиксированной ширины. Уберите ее и заполните контейнеры текстом. Вы сразу же заметите, что ваш margin:0 auto; не работает. Именно по этой причине выше были предложены два способа центрирования блоков. Примеры приводились с шириной блока, лишь для того, чтобы показать наглядно.

Автор: Rayled 8.11.2010, 20:37
FightInGlory, вы разрываете мне мозг. smile Я все прекрасно понимаю и о том, что в случае нефиксированной ширины внутренних блоков мой способ не работает я сам написал в предыдущем посте. Но в самом задании были явно указаны блоки фиксированной ширины и о том, что они должны быть резиной не было ни слова. Я думаю вопрошающему товарищу нужно было отцентрировать блоки именно фиксированной ширины. Почему? Потому что ваш способ его тоже устроил, а он, как и мой, не работает при нефиксированной ширине. Попробуйте убрать в своем примере ширину у блоков .cont и заполнить их текстом, у вас блоки растянутся в ширину родителя и встанут не рядом, а один под другим...

Автор: FightInGlory 9.11.2010, 12:01
2 Rayled, если вы не уверены в своих словах, то лучше не писать ерунду, а проверить. Удалив ширину и добавив текст вы убедитесь, что блоки позиционируются по середине.
Ваш способ отличается тем, что если необходимо будет вставить не два, а скажем три блока, придется менять ширину. А способы которые были предложены ранее в этом плане универсальны.
А кто кому разрывает еще мозг спорный вопрос.

Автор: Rayled 9.11.2010, 13:02
FightInGlory, это уже интересно, мда... Хорошо, пойдем другим путем.
Цитата(FightInGlory @  9.11.2010,  12:01 Найти цитируемый пост)
Удалив ширину и добавив текст вы убедитесь, что блоки позиционируются по середине

Вот ваш пример, я добавил только текст. Уберите width: 200px и посмотрите.
Код

<!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">
<title>Тест</title>
<style type="text/css">
*{
    padding:0;
    margin:0;
}
.block{
    width:100%;
}
.l-block{
    position:relative;
    left:50%;
    float:left;
}
.cont{
    float:left;
    position:relative;
    right:50%;
    width:200px;
    height:200px;
    margin-right:20px;
    border:1px solid red;
}
</style>
</head>
<body>
<div class="block">
    <div class="l-block">
        <div class="cont">
        Текст текст текст текст текст текст текст текст текст текст текст текст
        текст текст текст текст текст текст текст текст текст текст текст текст
        текст текст текст текст текст текст текст текст текст текст текст текст
        </div>
        <div class="cont">
        Текст текст текст текст текст текст текст текст текст текст текст текст
        текст текст текст текст текст текст текст текст текст текст текст текст
        текст текст текст текст текст текст текст текст текст текст текст текст
        </div>
    </div>
</div>
</body>
</html>


Цитата(FightInGlory @  9.11.2010,  12:01 Найти цитируемый пост)
Ваш способ отличается тем, что если необходимо будет вставить не два, а скажем три блока, придется менять ширину

Причем здесь три блока в данном случае?

Автор: FightInGlory 9.11.2010, 13:31
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/XHTML/DTD/xhtml1-strict.dtd">

Автор: Rayled 9.11.2010, 13:59
Хм,  аж интересно стало, не поленился доктайп поменял. Думаю неужели XHTML как-то совсем по другому с плавающими работает. Да нет. А вы сами-то пробовали проверять? Больше чем два слова пробовали в блоки вставлять при убранной ширине? 

Автор: FightInGlory 9.11.2010, 15:35
Переубедить вас сложно.
Вспомните как работает float:left, затем проверьте как работает display:inline-block может тогда поймете. А так я уже не знаю, как до вас донести. 
Если ваш контент получается больше размера экрана естественно следущий блок будет перекинут вниз.

Автор: Rayled 9.11.2010, 17:13
FightInGlory, меня не надо переубеждать. Это я хочу до вас донести, что в вашем способе при нефиксированных размерах блоков, во-первых, ширина родителя должна быть ОБЯЗАТЕЛЬНО фикс, во-вторых, надо контролировать ширину содержимого, иначе при определенных условиях все разлетится нафиг. Получается, что даже банальные несколько строк текста в такие блоки уже не набьешь, то есть ширину придется фиксировать. Да, возможно ваш способ хорош, если, например, надо центровать картинки разной ширины в два столбца, но даже здесь можно обойтись фикс. шириной. причем и разметки и CSS будет меньше.

Автор: FightInGlory 9.11.2010, 18:53
Для того, чтобы не расползалось как вы говорите надо задать max-width и все будет хорошо. Вы делаете блок размером с экран, а потом удивляетесь почему второй блок слетел вниз. Еще раз говорю посмотрите как работает флот, как работает дисплей:инлайн-блок, может тогда вы поймете.
Вот вам пример где можно использовать такое. У вас всплывающие попапы, разной ширины. Шапка состоит из иконки и надписи, надпись может меняться(допустим три языка и длинну вы не можете точно угадать). Подобный способ гарантирует вам, что независимо от ширину попапа, ваша иконка и надпись будет по середине.
Что-то до меня доносить не надо, потому как у меня все замечательно работает и использовал я данный сопоб не раз.

Автор: Rayled 9.11.2010, 19:53
Я знаю, как работает float и дисплей думаю не хуже вашего. А вот с max-width да, как-то о нем я не подумал. С ним преимущества вашего способа стали гораздо очевидней. Согласен. В общем, спасибо за разъяснения, жаль плюсануть не могу.

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