您的位置：首页 > 其它

float实例讲解

2016-02-14 08:50 330 查看

float实例讲解

float是个强大的属性，在实际前端开发过程中，人们经常拿它来进行布局，但有时，使用的不好，也麻烦多多啊。

比如，现在我们要实现一个两列布局，左边的列，宽度固定；右边的列，宽度自动扩展。

效果图见下：

<!DOCTYPE html>
<head>
<title>width_layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<style type="text/css">
.content {
min-width:300px;
}
.div1 {
width:200px;
height:300px;
background:green;
float:left;
}
.div2 {
height:300px;
background:pink;
margin-left:200px;
}
.div3 {
width:100px;
height:100px;
background:blue;
}
</style>
</head>
<body>

<div class="content">
<div class="div1"></div>
<div class="div2">
<div class="div3"></div>
</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航