CSS实现两列布局

最新推荐文章于 2024-10-27 15:21:36 发布

原创最新推荐文章于 2024-10-27 15:21:36 发布 · 698 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS-两列-布局

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种CSS布局方法，包括使用float属性和子绝父相定位，来实现两列布局的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

法一：float

**<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS两列布局</title>
    <style>
        *{
            padding:0px;
            margin:0px;
        }//chrome浏览器下：body默认margin均为8，但border、padding和其他div的margin、border、padding均为0
        .parent{
            height:500px;
            width:400px;
        }
        .one{
            float: left;
            width:200px;
            height:100%;
            margin-right:10px;
            background:red;
        }
        .two{
            position: relative;
            left:210px;
            right:0px;
            height:100%;
            background: blue;
        }

    </style>
</head>
<body>
   <div class="parent">
       <div class="one"></div>
       <div class="two"></div>
   </div>
</body>
</html>

法二：子绝父相（子绝对定位，父相对定位）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS两列布局</title>
    <style>
        .parent{
            height:500px;
            width:400px;
            position: relative;
        }
        .one{
            position: absolute;
            width:200px;
            height:100%;
            margin-right:10px;
            background:red;
        }
        .two{
            position: absolute;
            left:210px;
            right:0;
            height:100%;
            background:blue;
        }
    </style>
</head>
<body>
   <div class="parent">
       <div class="one"></div>
       <div class="two"></div>
   </div>
</body>
</html>

实现
这里写图片描述