Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.69/48: Рейтинг темы: голосов - 48, средняя оценка - 4.69
wao_138
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
1

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

15.03.2014, 12:35. Просмотров 8988. Ответов 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
Миниатюры
Расположить блоки разной высоты в две колонки   Расположить блоки разной высоты в две колонки  
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.03.2014, 12:35
Ответы с готовыми решениями:

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

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

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

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

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

14
zme9
94 / 67 / 23
Регистрация: 22.09.2013
Сообщений: 622
15.03.2014, 13:07 2
От блока 2 padding-bottom. Но я бы например сделал бы так. 2 дива , первый див с 1 и 2 блоком , второй див с 3 и 4 блоком , ограничил бы их по высоте и по идеи они бы выровнялись как на срине 1.
0
fol
496 / 475 / 155
Регистрация: 08.07.2013
Сообщений: 1,688
Записей в блоге: 1
15.03.2014, 13:59 3
создаем 2 блока с width по 45% -> в каждый из блоков помещаем содержимое -> профит
Расположить блоки разной высоты в две колонки
0
wao_138
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
15.03.2014, 14:23  [ТС] 4
Такой вариант, к сожалению не поможет, новости в WP нельзя же разбить на 2 отдельные колонки.
0
fol
496 / 475 / 155
Регистрация: 08.07.2013
Сообщений: 1,688
Записей в блоге: 1
15.03.2014, 17:07 5
зная php, можно
или можно воспользоваться вариантом вывода постов в таблице
0
Taatshi
Администратор
11717 / 5068 / 257
Регистрация: 05.04.2011
Сообщений: 13,834
Записей в блоге: 2
15.03.2014, 22:17 6
wao_138, было что-то на JQuery

Вот примерно

http://nesoc.ru/content/verstka-v-2-...jquery-masonry
1
wao_138
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
15.03.2014, 23:44  [ТС] 7
Taatshi, а на чистом css никак это не осуществить?
0
godsCoins
1 / 1 / 1
Регистрация: 11.04.2013
Сообщений: 5
16.03.2014, 02:18 8
для нужного блока установи отрицательное значение margin-top: -40px; например
но предполагаю что это не совсем подойдет, да?
0
wao_138
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
17.03.2014, 01:33  [ТС] 9
Цитата Сообщение от 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
410 / 372 / 163
Регистрация: 03.01.2013
Сообщений: 966
17.03.2014, 02:30 10
Может, здесь найдется решение
http://habrahabr.ru/post/137436/
1
snaipi91
6 / 6 / 1
Регистрация: 29.01.2014
Сообщений: 51
17.03.2014, 10:48 11
есть Плагин с помощью которого это можно реализовать Masonry называется
0
wao_138
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
20.03.2014, 01:06  [ТС] 12
Разобрался. Всем спасибо!
0
Academik
660 / 439 / 172
Регистрация: 04.04.2013
Сообщений: 1,917
21.03.2014, 03:22 13
wao_138, каким образом?
0
wao_138
0 / 0 / 0
Регистрация: 07.01.2014
Сообщений: 63
01.04.2014, 01:46  [ТС] 14
Mr Coder, c помощью Masonry :-)
0
MathMath
29 / 29 / 9
Регистрация: 03.03.2014
Сообщений: 58
01.04.2014, 02:15 15
Когда-то давно работал с masonry - штука полезная, но тормозная. Будьте аккуратнее. По возможности протестируйте аналоги и сравните скорость рендеринга страницы.
0
01.04.2014, 02:15
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
01.04.2014, 02:15

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

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

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


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

Или воспользуйтесь поиском по форуму:
15
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru