Вёрстка адаптивного шаблона по макету

@vertexp · Регистрация: 26.10.2016

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

Ребят, помогите правильно шаблон сделать, а то в итоге получаются смещения :/

На скрине показана структура. Структура будет резиновая относительно черного блока.

@mrtoxas · 03.11.2016, 15:28

Покажите что за смещение получается в итоге. Все три колонки должны быть резиновыми?

@vertexp · 03.11.2016, 15:52 **[ТС]**

В принципе, нужно что бы содержимое колонок немного ужималось при определенной ширине экрана, (полная резиновость не нужна)

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

Вопрос скорей как правильней сделать саму структуру, у меня при целиком блочной структуре, получалось смещение крайних колонок по высоте, относительно центральной.

@Fedor92 · 03.11.2016, 18:40

vertexp, и что сложного?

HTML5

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{box-sizing:border-box; padding: 0; margin: 0}
        html, body{width: 100%; height: 100%}
        .wrap{width: 100%; height: 100%; padding:10px; overflow:hidden; border:5px solid}
        .left, .center, .right{float:left; width: 33%; margin:0 0.165%; height:100%; border:5px solid red}
        .left, .right{padding:10px}
        .block{width: 100%; height: 33%; margin:0.165% 0; border:2px solid green}
        .center{background: orange; text-align: center}
    </style>
</head>
<body>
    <div class="wrap">
        <div class="left">
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
        </div>
        <div class="center">
            <p>Image</p>
        </div>
        <div class="right">
            <div class="block"></div>
            <div class="block"></div>
            <div class="block"></div>
        </div>
    </div>
</body>
</html>

@vertexp · 03.11.2016, 19:21 **[ТС]**

хмм.. Спасибо. Вроде то, что надо, видимо я где-то слишком перемудрил по неопытности :/

@vertexp 0 / 0 / 0 Регистрация: 26.10.2016 Сообщений: 8
		1
	Вёрстка адаптивного шаблона по макету 03.11.2016, 15:25. Показов 1147. Ответов 4 Метки нет (Все метки) Ребят, помогите правильно шаблон сделать, а то в итоге получаются смещения :/ На скрине показана структура. Структура будет резиновая относительно черного блока. Миниатюры 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	03.11.2016, 15:28	2
	Покажите что за смещение получается в итоге. Все три колонки должны быть резиновыми? 0

@vertexp 0 / 0 / 0 Регистрация: 26.10.2016 Сообщений: 8
	03.11.2016, 15:52 [ТС]	3
	В принципе, нужно что бы содержимое колонок немного ужималось при определенной ширине экрана, (полная резиновость не нужна) Блоки находящиеся в правой и левой колонки сжимались одинаково по соотношению к картинки в центральной колонки, то-есть все три колонки должны равномерно ужаться до определенных размеров для нужной ширины экрана. И при этом эти три колонки при уменьшении находились по центру черного блока. Вопрос скорей как правильней сделать саму структуру, у меня при целиком блочной структуре, получалось смещение крайних колонок по высоте, относительно центральной. 0

@vertexp 0 / 0 / 0 Регистрация: 26.10.2016 Сообщений: 8
	03.11.2016, 19:21 [ТС]	5
	хмм.. Спасибо. Вроде то, что надо, видимо я где-то слишком перемудрил по неопытности :/ 0

Опции темы

Вёрстка адаптивного шаблона по макету

Решение