首页 话题 小组 问答 好文 用户 我的社区 域名交易 唠叨

[分享]css两列布局 左边列表 右边

发布于 2024-11-11 19:17:49
0
19

CSS两列布局body { margin: 0; padding: 0; } .left { float: left; width: 20%; background-color: #f8f8f8; height: 100vh; } .right { float: left; width: 80%; padding: 20px; background-color: #fff; height: 100vh; } h1 { font-size: 30px; margin-bottom: 20px; } p { font-size: 18px; line-height: 1.5; margin-bottom: 20px; text-indent: 2em; } pre { background-color: #f8f8f8; padding: 10px; }

CSS两列布局

网页布局是网页设计的基础,CSS两列布局是最基本的布局之一。它采用浮动(float)属性来实现,左边列一般用于导航菜单,右边列则用于显示主要的内容。

.left {
	float: left;
	width: 20%;
}
.right {
	float: left;
	width: 80%;
} 

以上是实现CSS两列布局的关键代码。其中,左边列的宽度为20%,右边列的宽度为80%。这样,两列加起来的宽度就是100%。然后,将左边列设置为浮动(float: left;),这样右边列就会自动占据剩余的空间。

评论
一个月内的热帖推荐
91云脑
Lv.1普通用户

62849

帖子

14

小组

291

积分

赞助商广告
站长交流