Странное поведение VW/GridHtml

Программисты Html
Ответить
Гость
 Странное поведение VW/Grid

Сообщение Гость »


У меня проблема с vw, которую я не могу объяснить. В футере я создал divсшириной: 50 vwи когда я захожу посмотреть результат на сайте, то вижу, что он не доходит ровно до половины. Это также может быть проблемой с отображением сетки, но когда я использую инструмент разработчика Google, первая ширина div совпадает со второй, а также div в футереимеет одинаковуюширину.

Документ
Изображение

Изображение
Главная
Изображение
История
Изображение
Продукты
Изображение
Капелли
Изображение

Изображение

Изображение
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Рейсиендис, ducimus.c Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.
Изображение

Изображение
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro totam doloribus voluptates nihil quas facilis commodi? Reiciendis, ducimus.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut neque, eius, perspiciatis fugit rerum magnam vel illo repellat Provident a porro тотальная болезненная сладострастность nihil quas facilis commodi? Reiciendis, ducimus. dvg хх *{ размер коробки: border-box; маржа: 0%; семейство шрифтов: Comic Sans MS, Comic Sans, курсив; } } div: имеет (изображение) { высота строки: 0 %; } } изображение { ширина: 100 %; высота: 100 %; объект-пригонка: обложка; } } заголовок { дисплей: гибкий; цвет фона: # F5B01B; положение: липкое; оправдание-содержание: пространство-вокруг; выровнять элементы: по центру; верх: 0 пикселей; высота: 8вх; z-индекс: 1; } } заголовок div { ширина: расчет (110 пикселей + 3%); объект-пригонка: обложка; } } .символ { дисплей: гибкий; выровнять элементы: по центру; оправдание-содержание: центр; } } img[alt="smbl"]{ высота: 18 пикселей; ширина: 18 пикселей; объект-пригонка: обложка; } } img[alt="Логотип"]{ высота: 100 %; ширина: 100 %; объект-подходит: содержать; } } .imagine1{ цвет фона: #75540D; высота: 50вх; ширина: 100 %; } } .салон{ ширина: 100 %; высота: 100 %; объект-подходит: содержать; непрозрачность: 0,9; } } основной { основной { дисплей: сетка; столбцы-шаблона сетки: 1fr 1fr 1fr 1fr 1fr; сетка-авто-строки: Calc (50vw); } } .div1{ сетка-колонна: 1/4; текст-выравнивание: по центру; цвет фона: # F7C865; } } .div2{ .div2{ сетка-столбец: 4/7; текст-выравнивание: по центру; цвет фона: # F7C865; } } нижний колонтитул { цвет фона: шоколадный; высота: 10вх; } } нижний колонтитул > div { цвет фона: аквамарин; ширина: 50мм; } } первый элемент grid второй элемент grid div в нижнем колонтитуле

Я пытаюсь изменить vw в %, и это работает, но я хочу узнать, почему с помощью этого метода код не работает. спасибо
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»