两列布局左侧宽度不变右侧宽度自适应

最新推荐文章于 2019-08-13 14:50:45 发布

sxs1995

最新推荐文章于 2019-08-13 14:50:45 发布

阅读量331

点赞数 1

分类专栏：成长之路文章标签：两列布局左侧固定右侧自适应

本文链接：https://blog.csdn.net/sxs1995/article/details/78642379

版权

成长之路专栏收录该内容

6 篇文章 0 订阅

订阅专栏

两列布局左侧宽度不变右侧宽度自适应

<!DOCTYPE>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列布局</title>
    <link rel="stylesheet" href="test.css" type="text/css">
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

第一种方法:

.one {
    position: absolute;
    height: 200px;
    width: 200px;
    background: blue;
}
.two {
    height: 200px;
    margin-left: 200px;
    background: red;
}

第二种方法:

.one {
    float: left;
    height: 100px;
    width: 300px;
    background-color: blue;
}
.two {
    overflow: auto;
    height: 200px;
    background-color: red;
}

sxs1995

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两列布局左侧宽度不变右侧宽度自适应

两列布局左侧宽度不变右侧宽度自适应DOCTYPE>html lang="en">head> meta charset="UTF-8"> title>两列布局title> link rel="stylesheet" href="test.css" type="text/css">head>body> div class="one">div>
复制链接

扫一扫