Question

我需要页脚左侧放置一个图像，并在页脚右侧浮动一些文本（带链接的内联ul）。

这是CSS＆amp; HTML：

＆＃13;

footer {
   clear: both;
   background: #113551;
   width: 90%;
   margin: 0 auto;
}
.left-foot {
   float: left;
}
.right-foot {
  float: right;
}

＆＃13;

<footer>
   <div class="left-foot">
      <p> derp 1</p>
   </div>

   <div class="right-foot">
      <p>derp2</p>
   </div>
</footer>

＆＃13;

它工作正常，但是页脚的背景颜色没有显示出来。为什么不？解决这个问题的最佳方法是什么？它不一定非常像这样;我也没有任何运气能够获得相对位置和绝对位置。

Answer 1

用于清除float使用overflow:hidden

演示 - http://jsfiddle.net/b0v33rc0/1/

或在关闭页脚标记

之前添加样式div的{{1}}

演示 - http://jsfiddle.net/b0v33rc0/2/

Answer 2

我的写作与Vitorino Fernandes写的一样。

但是你也可以写下面给出的内容;

<强> HTML

<footer>
<div>
<p id="p1"> Derp1</p>
<p id="p2> Derp2</p>
</div>
</footer>

<强> CSS

 footer{
    width:100%;
    background: #113551;
    }

    footer > div{
    width:90%;
    margin:auto;
    }

    #p1{
    float:left;
    }
    #p2{
    float:right;
    }

我所做的是我只使用一个div作为<p>的容器。

Div漂浮在左边，div漂浮在右边，导致背景消失

2 个答案: