(优优发娱乐pt客户端下载) 如何讓他這樣排列

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

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

谢邀。

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

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


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

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

:nth-child1{}
:nth-child2{}
……
:nth-childn{}

可以用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>"//小图

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注