ホームページ > 記事 > ウェブフロントエンド > 複数の div を水平方向に均等に配置し、両端を壁に取り付ける方法_html/css_WEB-ITnose
複数の div を水平方向に均等に配置し、両端を壁に取り付ける方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:41:312158ブラウズ
複数の div を水平方向に均等に、両端の壁に近づけて配置する方法:
Web ページのレイアウトでは、多くの場合、複数の div をボックス内で水平方向に均等に配置し、両方の div を配置する必要があります。以下に示すように、ボックスの内壁を外側にぴったりと揃えて貼り付けます。
まずコード例を見てみましょう:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .parent{ width:480px; height:100px; border:1px solid red; overflow:hidden; } .parent div{ width:100px; height:100px; background-color:green; margin-left:20px; float:left; } </style> </head> <body> <div class="parent"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html> 上記のコードは均等に分散されていますが、外側のマージンがあるため、左側に配置されています。側面を親要素の内壁に貼り付けることはできないため、要件を満たすことができません。効果、コードの変更は次のとおりです。
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .parent{ width:460px; height:100px; border:1px solid red; overflow:hidden; } .wrap{ width:480px; height:100px; overflow:hidden } .parent .wrap div{ width:100px; height:100px; background-color:green; margin-right:20px; float:right; } </style> </head> <body> <div class="parent"> <div class="wrap"> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> </html> 上記のコードは、目的の効果を達成します。方法は、横に並べたdivの外側にもう一つdivをネストし、そのdivの幅を480pxにして、横に並べたdivが改行にならないようにする方法です。最も外側の div の幅を 460 に設定し、overflow 属性値を hidden に設定すると、右側の margin-right 領域が非表示になり、目的の効果が得られます。
元のアドレスは次のとおりです: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/501.html
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。