Как правильно сверстать блоки разного размера?

@Kazzi · Регистрация: 09.08.2015

Студворк — интернет-сервис помощи студентам

Здравствуйте всем!)

Есть идея наверстать новости в WP-сайте вот таким образом. На главной странице первый блок будет новостями, и выглядеть он должен по задумке вот так:

[del]

Как правильно сверстать блоки разного размера?

Кривовато нарисовано, но, я думаю, будет понятно. 6 блоков, разных размеров.Первый, с самой последней новостью, имеет одни стили. Следующие два блока с последующими новостями имеют другие стили, и последние три блока имеют третий тип стилей. Я не могу понять, как мне это сверстать, к сожалению.

Может кто подскажет, как будет правильнее это оформить? Может быть это при помощи flex-box сделать? Или бутстрапом? Ах, да... Это все дело должно быть адаптивным(( Я не профи далеко. Опыта почти нет, и я самоучка.

Пы Сы:
Заранее извиняюсь перед администрацией, если подобные темы уже были созданы. Честно признаюсь, что только мельком пробежался по страницам, и не обнаружил ни чего подобного(

@Penetrator_ · 06.04.2017, 06:26

Привет! Я думаю можно верстать любым доступным способом. И первое что приходит в голову это простые div элементы.
Только вот скорее всего надо сделать 3 блока основных в первом будет 1 блок с одной новостью во втором 2 и 3 блок с новостью и в 3 блоке будет 3,4,5 новость. Естественно надо основным блокам задать флоат по левому краю а внутри блоки будут в обычном состоянии. Ну а в адаптивности я сторонник писать всё самому и вручную... а это меда-запросы. Если bootstrap то классы col задать блокам не составит труда а вот с flex придется мне кажется переопределять значения медиа-запросами в зависимости от того как вы хотите разместить блоки при уменьшении экрана конечно.

Добавлено через 7 минут
Времени нет примерно так выглядит первоначальная разметка

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<style>
        body,html{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        div{
            padding: 5px;
            margin: 5px;
            
        }
        .new_block_1{
            float: left;    
            width: 48%;
            height: 100%;
        }
        .new_block_2{
            float: left;    
            width: 23%;
            height: 100%;
        }
        .new_block_3{
            float: left;    
            width: 23%;
            height: 100%;
        }
        .container{
            position: relative;
            height: auto;
            width: 100%;
            border:1px solid blue;
        }
        
        .container:after{
            content:'';
            clear: both;
            display: table;
        }
        .new_1{
            width: 100%;
            height: 100%;
            border: 1px solid red;
        }
        .new_2{
            width: 100%;
            height: 50%;
            border: 1px solid red;
        }
        .new_3{
            width: 100%;
            height: 50%;
            border: 1px solid red;
        }
        .new_4{
            width: 100%;
            height: 33.33%;
            border: 1px solid red;
        }
        .new_5{
            width: 100%;
            height: 33.33%;
            border: 1px solid red;
        }
        .new_6{
            width: 100%;
            height: 33.33%;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="new_block_1">
            <div class="new_1">Первая новость</div>
        </div>
        <div class="new_block_2">
            <div class="new_2">Вторая новость</div>
            <div class="new_3">Третья новость</div></div>
        <div class="new_block_3">
            <div class="new_4">Четвертая новость</div>
            <div class="new_5">Пятая новость</div>
            <div class="new_6">Шестая новость</div>
        </div>
        
    </div>
</body>

@Kazzi · 06.04.2017, 10:15 **[ТС]**

Да, это круто) Спасибо!)) Но есть один нюанс

Дело в том, что в WP блоки с новостями генерируются по шаблону php-циклом. А значит они должны иметь один класс. Разве нет?

Можно использовать :nth-child =) Однако при этом структура html должна быть примерно такой:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="Класс контейнера с новостями">
      <div class="блок с новостью">
      </div>
      <div class="блок с новостью">
      </div>
      <div class="блок с новостью">
      </div>
      <div class="блок с новостью">
      </div>
      <div class="блок с новостью">
      </div>
      <div class="блок с новостью">
      </div>
</div>

И стилями обращаться к блокам через псевдо-класс уже. Но вот как прописать им классы, что бы добиться при этом вот такого их расположения, я понять не могу((

Однако спасибо за ответ!)))) Я попробую применить ваш пример))))

@Penetrator_ · 06.04.2017, 10:18

ну конечно это надо делать по методологии используемой wp и скорее всего есть раздел наверное где именно обсуждают эти cms на форуме. Я из соображений html объяснил принцип а как его прописать wp надо отдельно заглядывать туда.

@Kazzi · 06.04.2017, 10:24 **[ТС]**

А есть отдельный раздел? Ща поищу. Я просто не увидел изначально( Спасибо!)))

@Penetrator_ · 06.04.2017, 10:28

вот вроде бы здесь
Ваша задача под изменение шаблона или модуля новостей для wp а это не накидать вот так сразу....

@Kazzi · 06.04.2017, 18:42 **[ТС]**

Спасибо большое))

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@Kazzi 0 / 0 / 0 Регистрация: 09.08.2015 Сообщений: 55

	Как правильно сверстать блоки разного размера? 06.04.2017, 01:16. Показов 5325. Ответов 6 Метки нет (Все метки) Здравствуйте всем!) Есть идея наверстать новости в WP-сайте вот таким образом. На главной странице первый блок будет новостями, и выглядеть он должен по задумке вот так: [del] Кривовато нарисовано, но, я думаю, будет понятно. 6 блоков, разных размеров.Первый, с самой последней новостью, имеет одни стили. Следующие два блока с последующими новостями имеют другие стили, и последние три блока имеют третий тип стилей. Я не могу понять, как мне это сверстать, к сожалению. Может кто подскажет, как будет правильнее это оформить? Может быть это при помощи flex-box сделать? Или бутстрапом? Ах, да... Это все дело должно быть адаптивным(( Я не профи далеко. Опыта почти нет, и я самоучка. Пы Сы: Заранее извиняюсь перед администрацией, если подобные темы уже были созданы. Честно признаюсь, что только мельком пробежался по страницам, и не обнаружил ни чего подобного( 0

@Penetrator_ 24 / 24 / 12 Регистрация: 01.03.2017 Сообщений: 93
	06.04.2017, 10:18
	ну конечно это надо делать по методологии используемой wp и скорее всего есть раздел наверное где именно обсуждают эти cms на форуме. Я из соображений html объяснил принцип а как его прописать wp надо отдельно заглядывать туда. 0

@Kazzi 0 / 0 / 0 Регистрация: 09.08.2015 Сообщений: 55
	06.04.2017, 10:24 [ТС]
	А есть отдельный раздел? Ща поищу. Я просто не увидел изначально( Спасибо!))) 0

@Penetrator_ 24 / 24 / 12 Регистрация: 01.03.2017 Сообщений: 93
	06.04.2017, 10:28
	вот вроде бы здесь Ваша задача под изменение шаблона или модуля новостей для wp а это не накидать вот так сразу.... 0

@Kazzi 0 / 0 / 0 Регистрация: 09.08.2015 Сообщений: 55
	06.04.2017, 18:42 [ТС]
	Спасибо большое)) 0