複数の div を同じ行に同じ間隔で分散:
このレイアウト効果は非常に頻繁に使用されます。つまり、複数の div が連続して分散され、div 間の間隔が同じであることがほとんどです。商品の表示を目的として、このレイアウトを実装する方法を紹介します。コード例は次のとおりです。
<!DOCTYPE html><html><head><meta charset=" utf-8"><title>div均匀分布代码实例</title> <style type="text/css"> *{ margin:0px; padding:0px;}#box{ width:430px; height:200px; background-color:red; overflow:hidden; margin:100px;}#box ul{ width:440px;}#box ul li{ width:100px; height:100px; background-color:green; float:left; margin-right:10px; list-style:none;}</style> </head> <body> <div id="box"> <ul> <li><a href="http://www.100sucai.com/web/wangyezhizuo/fanhuidingbu" title="返回顶部">返回顶部</a></li> <li><a href="http://www.100sucai.com/web/wangyezhizuo/tucengdaima" title="图层代码">图层代码</a></li> <li><a href="http://www.100sucai.com/web/wangyezhizuo/gundongdaima" title="滚动代码">滚动代码</a></li> <li><a href="http://www.100sucai.com/web/jquerytexiao/huandengpian" title="幻灯片">幻灯片</a></li> </ul></div></body> </html>
上記のコードは、div 内で li 要素を均等に分散することができます。真ん中の隙間は同じです。
原理は非常に単純です。つまり、li を左にフロートさせてから、li 要素間の間隔である margin-right 属性値を設定します。また、div 要素には overflow:hidden 属性があり、その部分はマージンを越えた右端は非表示になるので、右端の余白がなくなる効果を実現しました。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
