2

私のマークアップでは、フッターの下マージンが 25 ピクセルであることを期待しています。これは私がしました：

div.footer {
   margin-bottom: 25px;
}

成功がなければ、下のマージンはありません。私がこれを行う場合：

div.footer {
   margin-bottom: 25px;
   float: left;
}

できます！

知っている！フローティングの問題を解決できますが、それは良い習慣ですか? 他に方法はありませんか？

前もって感謝します。

==更新！/ 私のコードの一部 ==

CSS:

div.rlside-margin {
    margin: 0 25px;
}

div.tpside-margin {
    margin: 25px 0;
}

div.allside-margin {
    margin: 25px;
}

div.max-width {
   width: 60em;
   margin: 0 auto;
}

div.header {
   background-color: #efefef;
   width: 100%;
   height: 90px;
}

div.post-header {
   background-image: url("/Images/PostHeader_Background.jpg");
   width: 960px;
   height: 50px;
}

div.content {
   position: relative;
}

div.footer {
   margin-bottom: 25px;
}

HTML:

<div class="header">
    <div class="max-width">
       <a href="@Url.Action("Index", "Home")" class="logo float-left"></a>
       <ul class="navigation float-right">
          <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
          <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
          <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
       </ul>
    </div>
</div>

<div class="max-width">
    <div class="post-header">
        <ul class="options float-left">
            <li><a href="#"><span>Ofertas</span></a></li>
            <li><a href="#"><span>Lista de compras (0)</span></a></li>
        </ul>

        <div class="search-bar float-right">
            <form>
                <input class="float-left" type="text" placeholder="Por qual produto você procura? Digite aqui" />
                <button class="magnifier"></button>
            </form>
        </div>
    </div>
</div>

<div class="content">
    @RenderBody()
</div>

<div class="max-width">
    <div class="footer">
        <div class="tbside-margin">
            <hr />
            <ul class="bottom-navigation">
                <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
                <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
                <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
            </ul>
        </div>
    </div>
</div>
4

4 に答える 4

1

これは、あなたがdiv「正常な流れ」から外れたために発生しています。他の要素を浮かせて、効果的にメイン フローから外した可能性があります。div をマージンで配置したいので、通常のフローから取り出された要素とは関係ありません。そのため、フロートの追加が機能し、新しいフローに配置されます。

「フローティング ボックスは、通常のフロー内に配置され、次にフローから取り出され、可能な限り左または右にシフトされます。コンテンツは、フロートの側面に沿って流れる場合があります。[...] ボックスが取り出されるとき通常のフローの範囲内にあるすべてのコンテンツは、それを完全に無視し、そのためのスペースを作りません。」

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

于 2013-05-24T13:43:41.280 に答える
1

それはあなたのレイアウトに大きく依存します。HTMLまたはURLを表示すると役立ちます。しかし、クリスチャンが言ったように、ポジションを設定することは役に立ちます。position:relative;または、マージンの代わりに試してみることもできますpadding-bottom:25px;

于 2013-05-24T13:44:17.663 に答える
0

フロート アイテムの親要素のフロートをクリアする必要があります。

    いくつかの左のフローティング テキスト 一部の左のフローティング テキスト 

ul li span {
    float: left;
}
.clearfix {
    *zoom: 1;
}
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
于 2014-04-02T11:04:00.050 に答える
0

解決しました！

フッターのナビゲーションには、次のマークアップがあります。

<ul class="bottom-navigation">
    <li><a href="@Url.Action("Index", "Home")" rel="Home">Home</a></li>
    <li><a href="@Url.Action("Index", "Sobre")">Sobre</a></li>
    <li><a href="@Url.Action("Index", "Contato")">Fale conosco</a></li>
</ul>

そして私のCSS：

div.footer ul.bottom-navigation li {
    float: left;
}

問題は、メニュー項目を左にフロートできないことです。なんで？わかりませんが、解決するためにこれを行いました：

div.footer ul.bottom-navigation li {
    display: inline;
}

動作しますが、理由はわかりません。説明は大歓迎です。

ありがとう！

于 2013-05-24T14:12:37.827 に答える