附近图像
问题描述:
垂直居中的文字我希望我的页脚看起来像这样http://i.imgur.com/yZaDZyj.png附近图像
目前,它看起来像这样:http://i.imgur.com/g6VNaV9.png
我的形象是不固定的,我想“感谢我们的朋友”是近图像中间,就像上面的例子。
另一个问题是当我调整页面大小时,页脚中的所有文本都从div
退出。
代码:
#footer {
background-color: #3f4951;
display:block;
margin:0 auto;
width:100%;
}
section {
display:block;
}
.row {
margin:0 auto;
width:100%;
}
.footer-top {
padding: 37px 0 38px;
}
.column {
padding-left: 20px;
padding-right: 20px;
}
.footer-top nav {
float: left;
margin: 0;
max-width: 60%;
text-align: left;
}
.footer-top nav a {
color:#a9abad;
}
.footer-top .thanks {
margin-left:200px;
float:left;
max-width: 35%;
width: 250px;
}
.thankstext {
color:#a9abad;
font-size: 16px;
}
.footer-top * {
color:#a9abad;
}
.footimage {
}
<div id="footer">
<section class="footer-top">
<div class="row">
<div class="column small-12">
<nav>
<a>New or Existing Home Installation |</a>
<a href="#">Flushing |</a>
<a href="#">Serivicing |</a>
<a href="#">Service3 |</a>
<a href="#">Service4 |</a>
<a>All Services will be listed here.</a>
</nav>
<div class="thanks">
<div class="thankstext">Thanks our friends at</div>
<img class="footimage" src="footimage.png">
</div>
</div>
</div>
</section>
</div>
答
工作小提琴:https://jsfiddle.net/z5wbxzzo/1/
#footer {
background-color: #3f4951;
display:block;
margin:0 auto;
width:100%;
}
section{
display:block;
}
.row {
margin:0 auto;
width:100%;
}
.footer-top{
padding: 37px 0 38px;
}
.column {
padding-left: 20px;
padding-right: 20px;
}
.footer-top nav {
float: left;
margin: 0;
max-width: 60%;
text-align: left;
}
.footer-top nav a {
color:#a9abad;
display: inline-block;
}
.footer-top .thanks {
float:right;
max-width: 35%;
width: 250px;
}
.thankstext {
color:#a9abad;
font-size: 16px;
}
.footer-top* {
color:#a9abad;
}
.footer-top .thanks * {
display: inline-block;
}
也许你需要一个'明确:both'以确保包含div完全包裹的内容。你有浮动的元素,这意味着他们不再是(某些)文档定位/大小计算的一部分。 –
@ EdiD的你可以给你的网站网址,上面的代码不显示页脚正确。 –
这真的是2个问题之一。你可以编辑它只要求一个问题,然后在另一个帖子中询问另一个问题?否则,这个问题将被关闭,因为它的一半是重复的,然后另一半不会得到回答。 –