页面布局：三栏布局，假设高度已知，左右宽度固定为300px，中间自适应。

最新推荐文章于 2022-09-15 22:38:02 发布

dcclove

最新推荐文章于 2022-09-15 22:38:02 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/dcclove/article/details/78010169

版权

1.使用浮动布局
优点：兼容性比较好。
缺点：浮动后，元素是脱离文档流的，需要谨慎处理好清除浮动还有浮动的元素和周边元素之间的关系

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>页面布局</title>
 <style>
    * {
  margin: 0;
  padding: 0;
 }
 .layout{
  margin: 20px;
 }
 .layout article div{
  min-height: 100px;
 }
 
 </style>
</head>
<body>
 <!-- 浮动解决方案 -->
 <section class="layout float">
 <style>
 .layout.float .left{
  float: left;
  width: 300px;
  background: red;
 }
 .layout.float .right{
  float: right;
  width: 300px;
  background: blue;
 }
 .layout.float .center{
  background: yellow;
 }
 </style>
  <article class="left-right-center">
   <div class="left"></div>
   <div class="right"></div>
   <div class="center">

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

dcclove

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
页面布局：三栏布局，假设高度已知，左右宽度固定为300px，中间自适应。

1.使用浮动布局优点：兼容性比较好。缺点：浮动后，元素是脱离文档流的，需要谨慎处理好清除浮动还有浮动的元素和周边元素之间的关系页面布局 * { margin: 0; padding: 0; } .layout{ margin: 20px; } .layout article div{ min-height: 100px; }
复制链接

扫一扫