css图片浮动布局 |css移动端按钮动效

img{
float: left;  /* 图片向左浮动 */
margin: 0 10px 10px 0;  /* 图片与其他元素的距离 */
}

上面的代码中，大家将img元素的float属性设置为left，这样图片就会向左浮动。同时，大家还设置了图片与其他元素的距离，可以根据实际情况进行调整。

如果需要让多个图片按照一定的规律来布局，也可以采用类似于瀑布流的方式，设置每个图片的位置和大小，如下：

img{
float: left;
width: 200px;
height: auto;
margin: 10px;
}
img:nth-child(2n){  /* 第2n个图片 */
margin-right: 0;  /* 右侧边距为0 */
}

在这个例子中，大家设置每个图片的宽度为200px，高度按照比例自适应。同时，大家还利用了伪类选择器:nth-child(n)来选择每个图片的位置，使得每两个图片的右侧边距为0。

通过浮动布局，可以实现各种各样的图片布局效果，例如横向排列、纵向排列、瀑布流布局等等。只需要根据实际需求进行设置，就可以创建出漂亮实用的网页设计。