首页 > 代码库 > 慕课笔记利用css进行布局【两列布局】
慕课笔记利用css进行布局【两列布局】
<html>
<head>
<title>两列布局</title>
<style type="text/css">
body{margin:0;padding:0;text-align:center}
/*两列的布局样式*/
/*float:left向左浮动*/
.content{width:920px;margin:0 auto}
.left{width:20%;height:500px;background:#f00;float:left}
.right{width:80%;height:500px;background:#ff0;float:right}
</style>
</head>
<body>
<!--/*两列的布局样式*/-->
两列的布局样式，采用浮动的方式<br/>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果图如下：
关键知识点：
float:left向左浮动
float:right向右浮动
慕课笔记利用css进行布局【两列布局】
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。