CSS实现两列布局

关注

原创最新推荐文章于 2025-11-21 15:16:15 发布 736 阅读 AI 写同款· GEO 优化 ›

DIV+CSS 实例（使用定位方式实现横向两列布局）制作网页的重要的就是布局，布局根据自己的需求和喜好去进行更改，制作令自己满意的静态网页，所以就必须掌握好css，如何运用到项目中去，那么学了css，就该自己动手去做，这样才能容易吸收和消化。我就用div+css做了个静态网页，布局是两列布局方式，来看看实例吧。先给出html代码部分（index.html） <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <m 阅读详情

法一：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>