[英]Div floated left and div floated right causing background to disappear
I need the footer to have an image floated to the left and some more text (an inline ul
with links) floated to the right of the footer. 我需要页脚将图像浮动到左侧,并将更多文本(带有链接的内联
ul
)浮动到页脚的右侧。
Here is the CSS & HTML: 这是CSS和HTML:
footer { clear: both; background: #113551; width: 90%; margin: 0 auto; } .left-foot { float: left; } .right-foot { float: right; }
<footer> <div class="left-foot"> <p> derp 1</p> </div> <div class="right-foot"> <p>derp2</p> </div> </footer>
It works-ish, however the background color of the footer does not show up. 效果不错,但是页脚的背景色没有显示。 Why not?
为什么不? what is the best way to fix this?
解决此问题的最佳方法是什么? It doesn't have to necessarily be exactly like this;
不一定一定是这样。 I didn't have any luck getting this with position relative and absolute either.
我也没有运气获得相对和绝对位置。
for clearing float
use overflow:hidden
用于清除
float
使用overflow:hidden
demo - http://jsfiddle.net/b0v33rc0/1/ 演示-http: //jsfiddle.net/b0v33rc0/1/
or add a div
with styles clear:both
before closing tag of the footer 或添加样式为
clear:both
的div
clear:both
在关闭页脚标签之前
demo - http://jsfiddle.net/b0v33rc0/2/ 演示-http: //jsfiddle.net/b0v33rc0/2/
I was about to write the same as Vitorino Fernandes has written. 我正要写与维托里诺·费尔南德斯(Vitorino Fernandes)相同的作品。
However you could also write like given below; 但是,您也可以像下面这样写:
HTML HTML
<footer>
<div>
<p id="p1"> Derp1</p>
<p id="p2> Derp2</p>
</div>
</footer>
CSS CSS
footer{
width:100%;
background: #113551;
}
footer > div{
width:90%;
margin:auto;
}
#p1{
float:left;
}
#p2{
float:right;
}
What i have done is that I only used one div
as a container of <p>
. 我所做的是,我只使用了一个
div
作为<p>
的容器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.