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;or 代替 margin，尝试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 回答