css左右两栏布局

最新推荐文章于 2024-09-30 08:45:00 发布

Luoxi09

最新推荐文章于 2024-09-30 08:45:00 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/Luoxi09/article/details/46884371

版权

左右两栏布局，左面200px，右面自适应

方法一：左面使用float：left，右面使用margin-left

<head>
 <title>test</title>  
 <meta charset="utf-8">
 <style type="text/css">
 #left{
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
 }
 #right{
  height: 200px;
  margin-left: 200px;
  background-color: pink;
 }
 </style>
</head>
<body>
 <div id="left"></div>
 <div id="right"></div>
</body>
</html>

结果如下：

方法二：左面float，右面没有变化

<head>
 <title>test</title>  
 <meta charset="utf-8">
 <style type="text/css">
 #left{
  width: 200px;
  height: 200px;
  float: left;
  background-color: lightblue;
 }
 #right{
  height: 200px;
  background-color: pink;
 }
 </style>
</head>
<body>
 <div id="left"></div>
 <div id="right"></div>
</body>
</html>

结果如下：

如果右面有内容，还是会在粉红区域内显示，不会被蓝色区域覆盖掉