目录
浮动属性：
作用：控制页面元素脱离原有文档流，实现向左或向右 移动， 直到该元素外 边缘 碰到其包含 框或另一个浮动框的 边缘停止， 标准流中的其他盒子将顶到浮动盒子的位置 。浮动的元素不占据实际空间。属性： float取值：none ：表示对象不 浮动，默认值left ：对象向左浮动right ：对象向右浮动
一行两列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1行2列</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#container{
height: 500px;
width: 900px;
margin: 0 auto;
}
#aside{
width: 200px;
height: 500px;
background-color: black;
float: left;
}
#content{
width: 695px;
height: 500px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id ="aside"></div>
<div id="content"></div>
</div>
</body>
</html>
三行三列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2行3列</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#container{
height: 500px;
width: 650px;
margin: 0 auto;
}
#header{
color: #000000;
height: 100px;
background-color: red;
margin-bottom: 5px;
}
#aside1{
width: 20%;
height: 400px;
background-color: black;
float: left;
}
#aside2{
width: 20%;
height: 400px;
background-color: cyan;
float: left;
}
#content{
width: 60%;
height: 400px;
background-color: green;
float: left;
margin-bottom: 5px;
}
#footer{
height: 100px;
background-color: yellow;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="aside1"></div>
<div id="aside2"></div>
<div id="content"></div>
<div id="footer">
</div>
</div>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
