div 均一分散コード example_html/css_WEB-ITnose-htmlチュートリアル-php.cn

div 均一分散コード example_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:38:09

オリジナル

1936 人が閲覧しました

複数の 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 属性があり、その部分はマージンを越えた右端は非表示になるので、右端の余白がなくなる効果を実現しました。