VPF::Дивы рядами - Форум программистов

NLspieler

Дата 19.2.2010, 17:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 619
Регистрация: 13.10.2008
Где: Берлин

Репутация: нет
Всего: 19

Хочу научится такому трюкю.

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

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

Код


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

Это сообщение отредактировал(а) NLspieler - 19.2.2010, 17:29

bars80080

Дата 19.2.2010, 20:48 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

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

всё

Violator

Дата 19.2.2010, 21:49 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

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

December

Дата 19.2.2010, 21:51 (ссылка)

(нет голосов)

Загрузка ...

Antitheorist

Профиль
Группа: Участник
Сообщений: 4423
Регистрация: 14.8.2002
Где: Харьков

Репутация: 1
Всего: 57

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

--------------------

Для друзей с винграда - скидки на разработку сайтов

NLspieler

Дата 20.2.2010, 02:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 619
Регистрация: 13.10.2008
Где: Берлин

Репутация: нет
Всего: 19

Большое спасибо. Оказалось, что эта задача горазда проще, чем я думал.
Надо же. Всего лишь одна строчка в 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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 54
Регистрация: 26.12.2006

Репутация: нет
Всего: нет

Ещё, чтобы следующий за этой конструкцией блок не поплыл, надо добавить снизу

Код


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

NLspieler

Дата 20.2.2010, 03:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 619
Регистрация: 13.10.2008
Где: Берлин

Репутация: нет
Всего: 19

Цитата(segrey @ 20.2.2010, 02:42)

Ещё, чтобы следующий за этой конструкцией блок не поплыл, надо добавить снизу

Код


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

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

Violator

Дата 20.2.2010, 04:00 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

Код


<!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>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »