Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.88/104: Рейтинг темы: голосов - 104, средняя оценка - 4.88
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63

Расположить блоки разной высоты в две колонки

15.03.2014, 12:35. Показов 20104. Ответов 14
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день, подскажите пожалуйста, как мне исправить код, чтобы блоки выглядели как на 2-ом скрине, на данный момент, они как на 1-ом.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.postInem {
    position: relative;
    float: left;
    width: 240px;
    margin-left: 30px;
    margin-bottom:30px;
    display:block;
}
 
.postInem:first-child {
    position: relative;
    float: left;
    margin-bottom:30px;
}
Миниатюры
Расположить блоки разной высоты в две колонки   Расположить блоки разной высоты в две колонки  
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
15.03.2014, 12:35
Ответы с готовыми решениями:

Расположить блоки разной высоты один под другим, в несколько столбцов
Добрый день. Есть блоки разной высоты. Нужно расположить их один под другим в несколько столбцов. Пример Это можно сделать при...

Вертикально подогнать блоки разной высоты
Здравствуйте. Имеется такой код: <div class="wrapp"> <div class="div1">div1</div> <div class="div2">div2</div> <div...

Выровнять блоки разной высоты в двух колонках
Не знаю как можно выровнять данную конструкцию При одинаковой высоте блоков..Всё выглядит ровно Стоит только одному блоку изменить...

14
94 / 67 / 23
Регистрация: 22.09.2013
Сообщений: 626
15.03.2014, 13:07
От блока 2 padding-bottom. Но я бы например сделал бы так. 2 дива , первый див с 1 и 2 блоком , второй див с 3 и 4 блоком , ограничил бы их по высоте и по идеи они бы выровнялись как на срине 1.
0
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
15.03.2014, 13:59
создаем 2 блока с width по 45% -> в каждый из блоков помещаем содержимое -> профит
0
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
15.03.2014, 14:23  [ТС]
Такой вариант, к сожалению не поможет, новости в WP нельзя же разбить на 2 отдельные колонки.
0
 Аватар для fol
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,714
Записей в блоге: 1
15.03.2014, 17:07
зная php, можно
или можно воспользоваться вариантом вывода постов в таблице
0
Почетный модератор
12274 / 5340 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
15.03.2014, 22:17
wao_138, было что-то на JQuery

Вот примерно

http://nesoc.ru/content/verstk... ry-masonry
1
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
15.03.2014, 23:44  [ТС]
Taatshi, а на чистом css никак это не осуществить?
0
1 / 1 / 1
Регистрация: 11.04.2013
Сообщений: 5
16.03.2014, 02:18
для нужного блока установи отрицательное значение margin-top: -40px; например
но предполагаю что это не совсем подойдет, да?
0
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
17.03.2014, 01:33  [ТС]
Цитата Сообщение от godsCoins Посмотреть сообщение
но предполагаю что это не совсем подойдет, да?
к сожалению да (

Добавлено через 1 час 2 минуты
Taatshi, как бы я не пробовал, не помогает (
PHP
1
2
3
4
function mason_script() {
    wp_enqueue_script( 'jquery-masonry', get_template_directory_uri().'/masonry.pkgd.min.js' );
}
add_action( 'wp_enqueue_scripts', 'mason_script' );
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="container">
                <?php $posts = get_posts ("category=2,3,4&orderby=date&numberposts="); ?> 
                <?php if ($posts) : ?>
                <?php foreach ($posts as $post) : setup_postdata ($post); ?>
                <div class="item">              
                    <a href="<?php the_permalink() ?>" class="previewImg"> <?php the_post_thumbnail('arbitrary-thumbnail', array('alt = none ','title' => ''));?> </a>
                    <div class="postBox" style="clear: both">
                        <div>
                            <div class="postCategoryBox"><?php $category = the_category('/ '); ?></div>
                            <h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
                            <div class="postContentBox"><?php the_content(__(''));?></div>
                            <div class="clear"></div>
                            <div class="postMetaBox"><?php the_time('F d, Y г.') ?></div>
                        </div>
                    </div>
                </div> 
                <?php endforeach; ?>
                <?php endif; ?>
            </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
#container {
    width:820px;
    padding-top:20px;
    float:left;
}
 
.item {
    width: 240px; 
    margin: 0px 10px 15px 10px;
 
}
0
 Аватар для monochromer
419 / 381 / 163
Регистрация: 03.01.2013
Сообщений: 966
17.03.2014, 02:30
Может, здесь найдется решение
http://habrahabr.ru/post/137436/
1
 Аватар для snaipi91
6 / 6 / 1
Регистрация: 29.01.2014
Сообщений: 51
17.03.2014, 10:48
есть Плагин с помощью которого это можно реализовать Masonry называется
0
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
20.03.2014, 01:06  [ТС]
Разобрался. Всем спасибо!
0
1030 / 682 / 297
Регистрация: 04.04.2013
Сообщений: 2,751
21.03.2014, 03:22
wao_138, каким образом?
0
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
01.04.2014, 01:46  [ТС]
Mr Coder, c помощью Masonry :-)
0
 Аватар для MathMath
29 / 29 / 9
Регистрация: 03.03.2014
Сообщений: 58
01.04.2014, 02:15
Когда-то давно работал с masonry - штука полезная, но тормозная. Будьте аккуратнее. По возможности протестируйте аналоги и сравните скорость рендеринга страницы.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
01.04.2014, 02:15
Помогаю со студенческими работами здесь

Блоки в две колонки
Суть проблемы отображает картинка. Можно ли при помощи только HTML и CSS сделать чтобы блоки были один под одним, без пробелов? Вот код ...

Расположить список в две колонки
Здравствуйте. Скажите, как список &lt;ul&gt;, состоящий из нескольких строк, расположить в две (или несколько) колонки. Желательно с...

Расположить текст в две колонки
Всем привет))). Подскажи а то в голову ничего не идет. Нужно сделать так...

Расположить элементы в две колонки bootstrap 3
Здравствуйте. Я создала 6 кнопок, используя при этом сворачивание collapse. Как мне распределить их на две колонки? Когда я прописываю...

Списки li разной высоты
Добрый день! Помогите решить проблему с списком. Для того, чтобы выравнять 4 блока решил использовать text-align:justify Но проблема в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Новые блоги и статьи
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
Ломающие изменения в C#.NStar Alpha
Etyuhibosecyu 20.11.2025
Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух
kumehtar 18.11.2025
Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .
Создание Single Page Application на фреймах
krapotkin 16.11.2025
Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .
Фото: Daniel Greenwood
kumehtar 13.11.2025
Расскажи мне о Мире, бродяга
kumehtar 12.11.2025
— Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru