X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сверстать столбцами
kiik
kiik
Topic Starter сообщение 24.11.2011, 9:11; Ответить: kiik
Сообщение #1


Добрый день! Есть объявления, текст разный. Как сверстать так чтобы все объявления разделялись на 4 колонки, и при добавлении нового сдвигались вправо. [IMG]http://rghost.ru/31779311/image.png[/IMG]
Не используя таблицы. Смысл в общем в том чтобы объявления добавлялись в одно место (<div>, <p>).
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Электроник
Электроник
сообщение 24.11.2011, 11:25; Ответить: Электроник
Сообщение #2


[CSS]<style type="text/css">
.div0 {width:500px;}
.div1 {width:120px; height:100px; float:left; background-color:#ff0000;}
</style>[/CSS]
<div class="div0">
<div class="div1"> текст разный </div>
<div class="div1"> текст разный </div>
<div class="div1"> текст разный </div>
<div class="div1"> текст разный </div>
<div class="div1"> текст разный </div>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nickgu
nickgu
сообщение 24.11.2011, 11:27; Ответить: nickgu
Сообщение #3


html:

<div id="name">новое объявление</div>
<div id="name">объявление</div>
<div id="name">объявление</div>
....



css:
#name {
display: inline-block;
margin-right: 30px;
margin-top: 20px;
position: relative;
vertical-align: top;
width: 150px;


}

Такой должен быть div.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Очень
Очень
сообщение 24.11.2011, 13:51; Ответить: Очень
Сообщение #4


(nickgu @ 24.11.2011, 14:27) *
display: inline-block;

с осликом будет туго
(kiik @ 24.11.2011, 12:11) *
добавлении нового сдвигались вправо

старые по левому краю выровнять, новые - по правому
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
texno
texno
сообщение 24.11.2011, 20:14; Ответить: texno
Сообщение #5


(nickgu @ 24.11.2011, 14:27) *
<div id="name">новое объявление</div>
<div id="name">объявление</div>
<div id="name">объявление</div>

C одинаковым ИД, это круто!

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Арбитражники, как ведете учет расходов и доходов?
11 Boymaster 1762 Вчера, 23:35
автор: Boymaster
Горячая тема (нет новых ответов) Как вывести деньги в Украине с заблокированного Юмани ?
29 freeax 4781 Вчера, 1:19
автор: sergio11
Горячая тема (нет новых ответов) Как вы отдыхаете от работы за компом
148 adw-kupon.ru 19681 8.4.2024, 10:37
автор: Skyworker
Открытая тема (нет новых ответов) Как вы бросили работу и перешли на заработок с сайтов?
18 uahomka 3088 5.4.2024, 5:53
автор: Skyworker
Горячая тема (нет новых ответов) Как бездомные хранят деньги?
81 metvekot 13647 31.3.2024, 12:44
автор: Boymaster


 



RSS Текстовая версия Сейчас: 18.4.2024, 17:50
Дизайн