同じ行に 2 つの異なるコンテンツを設定する方法_html/css

同じ行に 2 つの異なるコンテンツを設定する方法_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:45:04

オリジナル

1947 人が閲覧しました

図に示すように、すべてのコンテンツが中央に配置されている場合、同じ行に異なるコンテンツが表示されます。たとえば、大学のニュースと通知とお知らせが同じ行にあります。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>

ログイン後にコピー