ホームページ > 記事 > ウェブフロントエンド > 同じ行に 2 つの異なるコンテンツを設定する方法_html/css_WEB-ITnose
同じ行に 2 つの異なるコンテンツを設定する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:041948ブラウズ
図に示すように、すべてのコンテンツが中央に配置されている場合、同じ行に異なるコンテンツが表示されます。たとえば、大学のニュースと通知とお知らせが同じ行にあります。CSS のみを使用してこれを設定する方法。 js を使用して
ディスカッションに返信 (解決策)
各 div の幅を設定し、1 つを左に (float:left)、もう 1 つを右に (float:right) するだけです
CSS レイアウトを理解する必要があります。
1. デフォルト レイアウト (要素は左から右、上から下の順に配置されます)
2. フローティング レイアウト (列レイアウト)
3. 配置レイアウト。
あなたが提起した問題を解決するには、フローティング レイアウトを使用する必要があります:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title><style type="text/css"> /* reset */ * { padding: 0; margin: 0;} /* main */ .main {width: 600px; overflow: hidden; background-color: #f1f1f1; margin: 20px auto; } .main-left {float: left; width: 400px; background-color: green; } .main-right {float: right; width: 200px; background-color: blue; } .news { } .notice {}</style></head><body> <div class="main"> <div class="main-left"> <div class="news"> news <br> news <br> news <br> news <br> news <br> news <br> news <br> </div> </div> <div class="main-right"> <div class="notice"> notice <br> notice <br> notice <br> notice <br> notice <br> notice <br> notice <br> </div> </div> </div></body></html> 声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。