Слияние кода завершено, страница обновится автоматически
Этот макет имеет те же требования, что и священный чашечный макет: трехколоночный макет с одинаковой шириной боковых колонок и центральной колонкой, которая адаптивна по ширине. Макет был создан командой UED Taobao.
<script v-pre type="text/x-template" id="double-wing-layout"> <style> main { width: 100%; padding: 39px 29px; font-size: 12px; } section { box-shadow: 0 0 0 1px #eee; } section::after { content: ''; display: block; clear: both; } section > div { height: 229px; line-height: 1.5em; text-align: center; float: left; color: white; } section .left, section .right { width: 119px; padding-top: 29px; background: #b4a078; } section .left { margin-left: -100%; } section .center { width: 100%; text-align: justify; hyphens: auto; } section .center-inner { height: 100%; margin: 0 129px; padding: 29px 12px; background: #b4a078; } section .right { margin-left: -119px; } /* ползунок ввода */ input[type="range"] { width: 100%; cursor: ew-resize; } </style>Разница заключается в подходах к решению проблемы "необходимости того, чтобы содержание центральной колонки не было скрыто": священный чашечный макет использует относительное позиционирование для боковых колонок и padding для центральной колонки, чтобы гарантировать, что её содержимое не будет скрыто. Двойной флип-эффект лейаут создаётся путём помещения внутреннего child div внутри среднего div для размещения контента, а затем использование margin-left и margin-right для создания места для двух боковых div. Это позволяет сэкономить один div и приблизительно четыре CSS свойства (в лейауте святого чаши для среднего div используются два свойства padding-left и padding-right, плюс два свойства position: relative для двух боковых div и соответствующие им right и left, всего шесть; в то время как в двойном флип-эффект лейауте используются два свойства margin-left и margin-right, 6 - 2 = 4). По моему мнению, это делает подход более прямым и простым по сравнению со святым чашей.?> Автор: Лю Яньцзюнь
Ссылка: https://www.zhihu.com/question/21504052/answer/50053054
Источник:知乎
Авторское право за автором. Коммерческое использование требует получения согласия от автора, некоммерческое использование должно указывать источник.
Авторское право за автором. Коммерческое использование требует получения согласия от автора, некоммерческое использование должно указывать источник.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )