html+css 两栏布局

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

嫌疑-人

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

阅读量654

点赞数

分类专栏： html+css 文章标签： html css

本文链接：https://blog.csdn.net/qq_39396275/article/details/81180546

版权

html+css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在开发中页面布局经常用到的两栏布局。

html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
<link rel="stylesheet" href="1.css">
<style type="text/css">

</style>
</head>

<body>
    <div class="right"></div>//细节问题，一定将right布局放在left前面
    <div class="left"></div>
</body
</html>

css:

*{
    padding: 0;
    margin: 0;
}
.left{
    background-color: #f40;
    margin-right: 100px;
    height: 100px;
}
.right{
    width: 100px;
    height: 100px;
    background-color: #ccc;
    position: absolute;
    right: 0;
}