1) Нужно создать под каждый блок отдельную страницу и настроить его. Таких блоков по горизонтали может быть от двух до четырех. Так-же, добавляем код 1 на страницы с блоками.

2) Добавляем код 2, в нем находится два элемента iframe, но если нам нужно больше блоков по горизонтали, нужно продублировать строку кода с элементом iframe и изменить в ней номер:
<iframe class="halfblock halfblock3"></iframe>

3) Добавляем код 3 и указываем ссылки на страницы с блоками, после var link1:
var link1 = " https://tildoshnaya.com/ page7484701.html";
$('.halfblock1').attr("src", link1);
Так-же дублируем эти строки, под каждый отдельный блок.

4) Добавляем код 4 и в нем указываем высоту блоков:
.halfblock {
height: 100vh;
}
Можно указать в пикселях 500px или в vh (100vh это 100% высоты экрана)

Так-же, указываем ширину каждого блока, копируя этот код:
.halfblock1 {
flex: 400px 0 0;
}
flex: 1 0 0; — остаток. Если у нас два блока и у одного блока поставить 400 пикселей, а у второго 1 0 0, тогда второй блок будет занимать (100% ширины экрана - 400 пикселей)
flex: 50% 0 0; — половина ширины экрана
flex: 400px 0 0; — 400 пикселей

Так-же, если нужно задать другое поведение блоков при определенной ширине экрана, добавляем код 5
<style>
@media screen and (max-width: 640px) {
.halfblock1 {
flex: 50% 0 0;
}
}
</style>

Можно добавить display: none и блок не будет отображаться:
.halfblock1 {
display: none;
}

Если на странице нужно еще в другом месте поставить несколько таких блоков, тогда нужно изменить класс элементов, например с halfblock1, на halfblock2-1.
Модификация дает возможность разместить по горизонтали на одном экране 2-4 разных блока.

Инструкция

Двойной блок

Код 1: добавляем на страницы с отдельными блоками
<style>
    html, body {
        height: 100vh;
        overflow: hidden;
    }
</style>
Код 2: добавляем на главную страницу
<div class="halfblock_wrap">
	<iframe class="halfblock halfblock1"></iframe>
	<iframe class="halfblock halfblock2"></iframe>
</div>
Код 3: добавляем на главную страницу, указываем ссылки на страницы
<script>
/* Указываем ссылку на страницу с блоком */
var link1 = "http://devdevdev.tilda.ws/page7477851.html";
var link2 = "http://devdevdev.tilda.ws/page7464744.html";

$('.halfblock1').attr("src", link1);
$('.halfblock2').attr("src", link2);
</script>
Код 4: добавляем на главную страницу, указываем ссылки на страницы
<style>
	.halfblock_wrap {
		display: flex;
		flex-flow: row nowrap;
		width: 100%;
	}
	
	.halfblock {
                /* Высота блоков */
		height: 100vh;
		border: 0;
		outline: 0;
	}
</style>
Код 5: если нужно чтобы в адативной версии блок вел себя иначе
<style>
/* До 640 пикселей */
@media screen and (max-width: 640px) {
	.halfblock1 {
		flex: 50% 0 0;
	}
}
</style>
Есть вопросы?
comments powered by HyperComments
Вот что есть еще
Made on
Tilda