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/
を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
