Подробное объяснение решения по адаптивному HTML-макету с фиксированной средней шириной слева и справа.

В этой статье представлено подробное объяснение адаптивного HTML-макета с фиксированной средней шириной для левой и правой сторон, а также показано следующее:

Структура HTML выглядит следующим образом

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //Сначала будьте осторожны левый и правый плавающие элементы визуализируются до визуализации среднего элемента. После того, как элемент станет плавающим, остальные элементы уровня блока займут ширину родительского элемента <style> .box{ height:200px; } .left{ float:left; width:300px } .right{ float:right; ; ширина: 300 пикселей } </style>

Структура HTML выглядит следующим образом

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //То же, что и плавающий макет, сначала визуализируйте левый и правый элементы так, чтобы они располагались на левом и правом концах родительского элемента, а оставшиеся средние элементы занимали оставшуюся ширину родительского элемента. <стиль> .box{ позиция: относительная; } .left{ позиция: абсолютная; ширина: 100 пикселей; } .right { ширина: 100 пикселей; абсолютная; } .center { маржа: 0 100 пикселей; ; фон: красный </style>

Помещение родительского элемента display:table и дочернего элемента display:table-cell превратит его во встроенный блок.

Плюсом такой раскладки является хорошая совместимость.

 <div class=box> <div class=left> влево </div> <div class=center> в центре </div> <div class=right> вправо </div></div><style> .box{ display : таблица; ширина: 100%; } .left{ display: table-cell; left: 0; } .right { display: table-cell } .center{ width: 100%; фон: красный </style>;

Отображение родительского элемента: все дочерние элементы будут расположены в ряд.

Ширина flex:n в дочернем элементе будет равна ширине родительского элемента/n.

Например, flex:1, ширина равна высоте родительского элемента.

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

 <div class=box> <div class=left> влево </div> <div class=center> в центре </div> <div class=right> вправо </div></div><style> .box{ display : flex; ширина: 100%; } .left{ширина: 100 пикселей; left: 0; .right{ширина:100 пикселей } .center{flex:1;

Родительский элемент display:grid;

Grid-templatecolumns:100px авто 100px;

По порядку ширина первого дочернего элемента — 100 пикселей, второго — адаптивного, а третьего — 100 пикселей;

Преимущество макета сетки в том, что он чрезвычайно прост и напрямую определяется стилем родительского элемента. Недостаток — невысокая совместимость.

 <div class=box> <div class=left> влево </div> <div class=center> в центре </div> <div class=right> вправо </div></div><style> .box{ display : сетка; столбцы-шаблона сетки: 100 пикселей авто ширина 100 пикселей: </style>;

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.