方框列数随着浏览器宽度改变而改变的几种方法

最新推荐文章于 2023-01-02 21:27:42 发布

转载最新推荐文章于 2023-01-02 21:27:42 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhrn/p/4464066.html

本文介绍了一种利用浮动(float)实现响应式布局的方法，并详细解释了如何通过设置适当的margin和padding来调整元素间的间距。此外，还探讨了如何利用overflow属性解决浮动引起的布局问题。

方框列数随着浏览器宽度改变而改变的几种方法

一,使用浮动float

<!DOCTYPE html>

<html>
<head lang="en">

<meta charset="UTF-8">

<title>考察浮动</title>

<style type="text/css">

#content {

background-color: red;

position: relative;

padding: 12px;/*red 的padding+blue的margin =测的宽 */

overflow: hidden;/*父元素overflow:hidden 可以闭合浮动*/        }

.div-in {

width:107px;

height: 54px;

background-color: blue;

margin:6px;/*测的各间距是12  一半是6 *//*margin不合并，因为float,正常位置是合并的*/

border:solid 1px #000000;

float: left;

}

</style>

</head>

<body>

<div id="content">

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

<div class="div-in">111</div>

</div>

</body>

</html>