HTML реализует макет из двух столбцов, фиксированную ширину слева и адаптивную справа.
Реализация первая: <style> body, html{padding:0; Margin:0;} // В соответствии с позиционированием CSS используйте плавающее или абсолютное позиционирование, чтобы отделить элемент левого блока от обычного потока документов и его можно сопоставить с элементом div правого блока: nth-of -type(1){ float: left; //Использовать плавающее // положение: Absolute; //Использовать абсолютное позиционирование // сверху: 0; // ширина: 300 пикселей; высота: 200 пикселей; красный; } // [Элемент уровня блока, по умолчанию автоматически заполняет ширину родительского элемента, занимая одну строку] // Сейчас: ширина правого блочного элемента = ширине родительского элемента div:nth-of-type(2){ // Устанавливаем поле слева равным ширине левого элемента блока. margin-left: 300px; // Теперь: ширина правого блочного элемента = ширина родительского элемента - левая высота: 220px background: blue </style><html> <div>div1</; div> <div >div2</div></html>1) Перед установкой поля слева
2) После установки поля слева
Реализация вторая: <style> body, html{padding:0; Margin:0;} // В соответствии с позиционированием CSS используйте плавающее или абсолютное позиционирование, чтобы отделить элемент блока слева от обычного потока документов div:nth-of-type(1 ){ float : left; //Используем плавающее // положение: абсолютное; //Используем абсолютное позиционирование // сверху: 0; ширина: 300 пикселей; высота: 200 пикселей; FC — это обычный (регулярный) поток документов, контекст форматирования, область отрисовки на странице и набор спецификаций отрисовки. BFC — это контекст форматирования на уровне блоков. // Используем контекст форматирования на уровне блока BFC для создания изолированного независимого контейнера div:nth-of-type(2){ // Изменяем значение переполнения на невидимое, вызывая переполнение BFC: скрыто; фон: синий; </style><html> <div>div1</div> <div>div2</div></html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.