CSS の問題についてアドバイスを求める_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS の問題についてアドバイスを求める_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 09:32:24

オリジナル

1133 人が閲覧しました

  <div class="page">        <div id="header">            <div id="title">                <h1>Welcome to my blog</h1>            </div>                          <div id="logindisplay">                <% Html.RenderPartial("LogOnUserControl"); %>            </div>                         <div id="menucontainer">          <% Html.RenderPartial("UserMenuControl"); %>            </div>        </div>        <div class="main">            <asp:ContentPlaceHolder ID="MainContent" runat="server" />            <div id="footer">            </div>        </div>    </div>

ログイン後にコピー

上はコードです
下部は CSS です

.page{    width: 90%;    margin-left: auto;    margin-right: auto;}#header{    position: relative;    margin-bottom: 0px;    color: #000;    padding: 0;}div#title{    display:block;    float:left;    text-align:left;}#logindisplay{    font-size:1.1em;    display:block;    text-align:right;    margin:10px;    color:White;}#menucontainer{    margin-top:40px;   }

ログイン後にコピー

上の

についてお聞きしたいのですが、なぜページは次のように表示されますか?

#logindisplay

text-align:right
}
if margin: 10px; 相対配置の場合、logindisplay の ID はタイトルの下に 10 個空ける必要があります。両方;
}

投稿者が試してみました

私が聞きたいのは、その理由です
title float を使用してテキストフローから抜け出す

logindisplay が起動します。

float:left の理由については、#logindisplay スタイルに clear:both; を追加して、フローティングスタイルをクリアします

上記はすべて正解です

float:left の理由については、clear:both; を追加します。 #logindisplay スタイルをクリアします。フローティングスタイル

タイトルと logindisplay を同じ行に配置する場合は、logindisplay に float: を追加する必要があります。

タイトルは float を使用してテキストフローから切り離され、元のテキストフローレイアウトを尊重しなくなりましたが、親に基づいて配置されますが、他の子は引き続き元のテキストフローレイアウトに従います。
logindisplay は元のタイトルの位置を占めています...logindisplay が駆け上がりました

フローティングとドキュメントフローについて学ぶことをお勧めします。。