[英]Float left, float right aren't working
As you can see in my jsfidle : 如您在我的jsfidle中所见 :
.footer {
background-image:url('/images/footer_bg.png') bottom repeat-x;
height: 110px;
}
#footercontent {
display:table-cell;
vertical-align: middle;
height:110px;
}
#leftfoot {
float: left;
font-family:maven;
font-size: 15px;
padding-left: 20px;
}
#rightfoot {
float: right;
}
The #rightfoot
right-floated divider isn't displaying on the right of the page, but instead alongside the #leftfoot
, why is this? #rightfoot
右浮动分隔符未显示在页面的右侧,而是显示在#leftfoot
旁边,为什么?
You gave no width, so they will extend until the browser's window and therefore, push one below. 您没有设置宽度,因此它们会一直扩展到浏览器窗口,因此请向下方推。 To keep them side by side, declare a width. 要使其并排,请声明宽度。
For example, I declared: 例如,我声明:
#leftfoot, #rightfoot {
width:50%;
}
Note: See that I declared the padding in the container instead of the floated div. 注意:请参见我在容器中声明了填充,而不是浮动div。 If you leave on the floated div, the final width would be 50% of window+20px (which will make the right float to line break). 如果您留在浮动div上,则最终宽度将是window + 20px的50%(这将使正确的浮动浮动到换行符)。 If you want to keep padding on the floated divs, add box-sizing:border-box;
如果要在浮动div上保持填充,请添加box-sizing:border-box;
(but it's not supported by old browsers so it's best to leave padding for the container) (但旧浏览器不支持,因此最好为容器保留填充)
This is happening because your #footercontent
is set to display as table-cell
and has no parent width. 发生这种情况是因为您的#footercontent
设置为显示为table-cell
,并且没有父级宽度。 Its width is currently controlled by the content within. 当前它的宽度由其中的内容控制。
To resolve this, I've given it a parent divider which is set to display as table
with 100% width: 为了解决这个问题,我给了它一个父分隔符,该分隔符设置为以100%宽度显示为table
:
<div id="footerContainer">
<div id="footercontent">
...
</div>
</div>
#footerContainer {
display:table;
width:100%;
}
To align the #rightfoot
content to the right, I've simply given that a text-align
of right: 为了使#rightfoot
内容向右对齐,我只给出了right的text-align
方式:
#rightfoot {
text-align:right;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.