Question

我希望更改页脚的背景颜色。我尝试在它周围制作另一个div，但无论背景颜色是什么都没有让步。我必须忽略一些明显的东西！

这就是我现在所拥有的：http://jsfiddle.net/x5yvm50r/

代码：

<div class="floatleft">
<h3>Heading</h3>
<ul>
<li><a href="http://">Link 1</a></li>
<li><a href="http://">Link 1</a></li>
<li><a href="http://">Link 1</a></li>
<li><a href="http://">Link 1</a></li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>

.floatleft {float: left; margin: 0 20px 0 0; width: 400px;}
.clear {clear:both}

如果有人有任何想法，我真的很感激指点我正确的方向！这或多或少是我希望它最终看起来像 enter image description here

谢谢！：）

Answer 1

检查此fiddle

<强> HTML

<div class="floatleft footcontainer">
    <div class="floatleft">

<h3>Heading</h3>

        <ul>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
    </div>
    <div class="floatleft">

<h3>Heading</h3>

        <img src="http://i.imgur.com/N23RQo5.png">
    </div>
    <div class="floatleft">

<h3>Heading</h3>
social icons</div>
    <div class="clear"></div>
</div>

<强> CSS

.floatleft {
    float: left;
    margin: 0 20px 0 0;
    width: 400px;
}
.clear {
    clear:both
}
.footcontainer {
    background-color:lightblue;
    float:left;
}

我添加了一个div，它包含3个div并赋予它背景颜色和float属性。

Answer 2

在这里：http://jsfiddle.net/5s4w19zy/

我将三个浮动的div包裹在一个容器div（页脚）中，然后将它们浮在其中。

<footer>
    <div>
        <h3>Heading</h3>
        <ul>
            <li><a href="http://">Link 1</a></li>
            <li><a href="http://">Link 1</a></li>
            <li><a href="http://">Link 1</a></li>
            <li><a href="http://">Link 1</a></li>
        </ul>
    </div>
    <div>
        <h3>Heading</h3>
        <img src="http://i.imgur.com/N23RQo5.png">
    </div>
    <div>
        <h3>Heading</h3>
        social icons
    </div>
    <div class="clear"></div>
</footer>

footer
{
    width: 100%;
    height: 150px;
    background: #f5f5f5;
    overflow: hidden;
}

footer div
{
    float: left;
    display: block;
    margin: 0 0 0 0;
    width: 33.333333%;
    height: 150px;
}

.clear {clear:both}

Answer 3

HTML5提供语义标记标记，因为您需要页脚的包装器（允许父元素具有您选择的背景颜色属性），<footer>标记听起来像是要走的路：< / p>

<footer id="footer">
    <div class="floatleft">
    <h3>Heading</h3>
    <ul>
    <li><a href="http://">Link 1</a></li>
    <li><a href="http://">Link 1</a></li>
    <li><a href="http://">Link 1</a></li>
    <li><a href="http://">Link 1</a></li>
    </div>
    <div class="floatleft">
    <h3>Heading</h3>
    <img src="http://i.imgur.com/N23RQo5.png">
    </div>
    <div class="floatleft">
    <h3>Heading</h3>
    social icons
    </div>
    <div class="clear"></div>
</footer>

#footer { background-color:#asYouLikeIt; }

Answer 4

很简单，您应该将内容包装在单独的块级元素（即div或footer）中。这是更新的小提琴，使用块级别元素，id =＆＃34; wrapper＆＃34;：http://jsfiddle.net/df1zjwmb/1/

<footer id="wrapper">
   <div class="floatleft">
        <h3>Heading</h3>
        <ul>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
            <li><a href="http://">Link 1</a>
            </li>
    </div>
    <div class="floatleft">
        <h3>Heading</h3>
        <img src="http://i.imgur.com/N23RQo5.png">
    </div>
    <div class="floatleft">
         <h3>Heading</h3>
        social icons
    </div>
    <div class="clear"></div>
</footer>

CSS：

#wrapper {
    background-color: green;
}

清除浮动元素意味着清除下面的元素将被重置，但不会将浮动元素转换为块本身。要解决此问题，需要添加包装器div，它会创建一个可以应用背景颜色的块级元素。或者你可以使用浮点数以外的东西，比如内联块。

以下是更多信息：Advantages of using display:inline-block vs float:left in CSS

Answer 5

我使用过flex box：

检查一下：http://jsfiddle.net/x5yvm50r/9/

HTML：

<footer>
    <section class="left">l</section>
    <section class="center">c</section>
    <section class="right">r</section>
</footer>

CSS：

footer{
    width:100%;
    display:flex;
}
footer section{
    flex:1;
}

3列页脚背景颜色

5 个答案:

检查此fiddle