ホームページ >ウェブフロントエンド >htmlチュートリアル >css_html/css_WEB-ITnose で 2 つの div を同じ行に配置する方法
css_html/css_WEB-ITnose で 2 つの div を同じ行に配置する方法
- WBOYオリジナル
- 2016-06-24 11:29:411741ブラウズ
CSS で 2 つの div 要素を同じ行に配置する方法:
2 つの div 要素を同じ行に配置するのは基本的な操作であり、実装も非常に簡単なので、初心者には役立ちます。
1. 関数型浮動メソッドを使用します:
コードは次のとおりです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:150px; height:50px; background:blue;}.left{float:left}.right{float:right}</style></head><body><div class="left"></div><div class="right"></div></body></html> 2. div をインライン ブロック レベル要素として設定します:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> div{ width:150px; height:50px; background:blue; display:inline-block;}.left{background:red}.right{background:blue}</style></head><body><div class="left"></div><div class="right"></div></body></html> 元のアドレスは次のとおりです: http://www.softwhy .com/forum.php ?mod=viewthread&tid=13927
詳細については、http://www.softwhy.com/divcss/
を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。