ホームページ  >  記事  >  ウェブフロントエンド  >  2つの正方形を横に並べる方法_html/css_WEB-ITnose

2つの正方形を横に並べる方法_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-21 09:03:101432ブラウズ



図のように、これら 2 つの正方形を水平に配置したいのですが、どうすればよいですか? 。 。 。


ディスカッションへの返信(解決策)

1. diaplay:inline-block;
2.float:left;
3. 位置決めも可能です

1.display:inline-block

2.float-left

3.position



<!DOCTYPE html><html><head><title></title><meta charset="UTF-8"><style>.oDiv1,.oDiv2{width:100px;height:100px;border:1px solid #333;float:left;}.oDiv2{margin-left:4px;}</style></head><body><div class="oDiv1"></div><div class="oDiv2"></div></body></html>
1.display:inline-block //ie6 は互換性がありません

次の 2 つのタイプを使用することをお勧めします:

2.float:left
3.position :absoult

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。