如何讓他這樣排列

Question

請問一下
我想用php引資料庫的資料出來
然後使他這樣排列:

如何讓div區塊能夠像這樣排列呢
就是除了"最愛精選"那個區塊不會動以外
讓其他圖片能夠這樣排列呢
包括右側那個大的也是

Answer 1

谢邀。

简单的写个dmeo，基于inline-block的实现，兼容到ie7等的就自己用autoprefixer打包吧。

点开看代码
https://jsfiddle.net/fwjs22no/

---

更新用float布局，用传统布局的好处是兼容性。

点开看代码
https://jsfiddle.net/fwjs22no/1/

Answer 2

:nth-child(1){}
:nth-child(2){}
......
:nth-child(n){}

Answer 3

可以用css的浮动实现

• 给“最爱精选”的css样式加上

overflow: hidden;//触发BFC，之后浮动的元素不会与之重叠

• 然后给这个大图的容器写上浮动和高宽

.big {
    float: right;
    height: ?px;
    width: ?px;
}

• 然后小图的容器样式写上

.small {
    float: left;
}

• 这样他们就会按这样的形式进行排列了。
  甚至可以由php直接传递一个标签字符串过来

$big = "<img src='??/??.jpg' class='big'>"//大图
$small = "<img src='??/??.jpg' class='small'>"//小图

Answer 4

左中右三个大div,然后往里面塞 小 div