您的位置：首页 > 其它

float对div宽度的影响

2016-02-29 08:18 309 查看

大部分时间，大家可能在重构的时候，都是先限制了div的宽度了的，但是很多时候没有必要这样做，利用float就可以很好的解决这个问题：

1.div宽度

默认情况下，div的宽度是自适应auto的，在没有设置float的情况下，宽度是自动调整最大化，设置float之后，宽度自动调整最小化。如下图：

2.div高度

是否设置float属性，高度都是自动调整最小化。

3.示例代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
margin: 0;
}

.container {
width: 80%;
margin: 0 auto;
}

.image {
/*float: left;*/
border: 1px solid #efefef;
padding: 5px;
margin: 5px;
}

a {
text-decoration: none;
}

img {
width: 200px;
height: 200px;
}

.text {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="image">
<a href="#">
<img src="../img/xh.jpg" alt=""/>

<div class="text">
西湖美景
</div>
</a>
</div>
<div style="clear:both"></div>
<div class="image">
<a href="#">
<img src="../img/xh.jpg" alt=""/>

<div class="text">
西湖美景
</div>
</a>
</div>

<div class="image">
<a href="#">
<img src="../img/xh.jpg" alt=""/>

<div class="text">
西湖美景
</div>
</a>
</div>

<div class="image">
<a href="#">
<img src="../img/xh.jpg" alt=""/>

<div class="text">
西湖美景
</div>
</a>
</div>

<div class="image">
<a href="#">
<img src="../img/xh.jpg" alt=""/>

<div class="text">
西湖美景
</div>
</a>
</div>
</div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航