Question

HTML/CSS：请问怎么实现如下布局？

像网格一样的布局，宽度变化时，网格的宽度不变，间距变化，当宽度变化过多时，网格横排个数减少，多出的挪到下一排、、、、（类似于淘宝商品页）

Answer 1

用float是达不到你想要的效果的，因为网格间的间距被定死了，所以当总宽度变化时虽然网格横排个数会减少或增多，但其间距不变。

我的思路是将每个网格显示为inline-block（行内块元素），再设置其父容器的text-align:justify（两端对齐），这样的话每行的网格都会根据父容器宽度自适应个数和间距。一图胜千言：

当改变父容器宽度时：

看看是不是你要的效果。

Answer 2

百度：css媒体查询，用媒体查询可以设置条件，比如：

当屏幕宽度为1px-320px的时候用一套样式
当宽度为321px-960px时用另一套样式

Answer 3

用响应式吧~CSS3可以做到~去百度一下CSS3响应式网页布局你就懂了~当然如果你想更好的的使用响应式可以去学一个叫bootstorp的CSS框架~那个对响应式的支持也很好~

Answer 4

全部float:left就行了。

Answer 5

float属性