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


Автор: NLspieler 19.2.2010, 17:28
Хочу научится такому трюкю.

Есть родительский див, с неизвестной шириной. 

В нем нужно расположить дивчиков, которые должны распологатся рядами.
Количество дивчиков в одном ряду динамично. Изменили размер браузера: дивчики сразу расположились по новому.

Код

<div class="parent">
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
     <div class="child"></div>
    ........
</div>




Автор: bars80080 19.2.2010, 20:48
так очень просто: задай им фиксированную ширину и float: left; 

всё

Автор: Violator 19.2.2010, 21:49
bars80080, 
не все, в таком случае и высота должна быть фиксированной, лучше применять inline-block для child

Автор: December 19.2.2010, 21:51
Violator, 
Как правило, такое расположение элементов предполагает фиксированную высоту у всех чилдов. Иначе дизайн весьма аляповато смотрится.

Автор: NLspieler 20.2.2010, 02:28
Большое спасибо. Оказалось, что эта задача горазда проще, чем я думал.
Надо же. Всего лишь одна строчка в css необходима! 
И что самое удиветельное, даже самые древние браузеры понимают все так, как надо.
Вот кстати наглядный пример, для тех, кто возможно решит сделать что то подобное

Код

<!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=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
<!--
.parent {
    position: relative;
    height: 500px;
    width: 100%;
}
.parent .child {
    background-color: #CCCCCC;
    height: 300px;
    width: 190px;
    margin: 3px;
    float: left;
}
-->
</style>
</head>

<body>

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>   
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>       
</div>

</body>
</html>




Цитата

bars80080, 
не все, в таком случае и высота должна быть фиксированной, лучше применять inline-block для child


Цитата

Violator, 
Как правило, такое расположение элементов предполагает фиксированную высоту у всех чилдов. Иначе дизайн весьма аляповато смотрится.


Прошу пример в студию!



Автор: segrey 20.2.2010, 02:42
Ещё, чтобы следующий за этой конструкцией блок не поплыл, надо добавить снизу
Код

<div style="clear:both"></div>

Автор: NLspieler 20.2.2010, 03:20
Цитата(segrey @ 20.2.2010,  02:42)
Ещё, чтобы следующий за этой конструкцией блок не поплыл, надо добавить снизу
Код

<div style="clear:both"></div>

А можно простой пример, 
пока что ничего не плывет, проверял на опере, фаерфоксе, эксплолере с 6 версии? 

Автор: Violator 20.2.2010, 04:00
Код

<!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=utf-8" />
<title></title>
<style type="text/css">
* { margin: 0; padding: 0; }
.parent {
  background: red;
}
.parent .child {
  background-color: #CCCCCC;
  height: 300px;
  width: 190px;
  margin: 3px;
  float: left;
}
.div { height: 20px; background: green; }
.clear { clear: both; }
</style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
    <!-- убрать комментарий
    <div class="clear"></div>
    -->
  </div>
  <div class="div"></div>
</body>
</html>

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