CSS页脚格式
[英]CSS footer formatting
问题描述
I have a couple of problems in my CSS footer. 
我的CSS页脚中有几个问题。 Please run this snippet in Full Page to see how it lays out on a larger display (I will be making it responsive a little later. For now, please just use Full Page). 请在“整页”中运行此代码段，以查看其在较大的显示器上的布局（我将在稍后进行响应。现在，请使用“整页”）。
.small col-md-3 { font-size: .8em } .footer-distributed { background-color: #34385E; width: 100% } .footer-distributed .footer-links { color: #ffffff; } .footer-distributed .footer-links a { line-height: 1.8; color: inherit; padding: 0 2em; } .footer-distributed .footer-left-bar { border-left: solid; color: #FFFFFF; } footer { position: fixed; bottom: 0; }
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css"> </head> <body> <footer class="footer-distributed"> <div class="row" style="height: 1em"></div> <div class="row"> <div class="col-md-3"> <p class="footer-links"> <a href="#">Link Number 123</a> <a href="#">Link Number 2</a> <a href="#">Link Number 3</a> <a href="#">Link Number 4</a> </p> </div> <div class="col-md-6 footer-left-bar"> <div class="row footer-links"> <div class="col-md-6"> <p>This information is</br> always three</br> lines long </p> </div> </div> </div> <div class="col-md-3 footer-left-bar"> <div class="row footer-links"> <div class="col-md-6">BRANDING 1</div> <div class="col-md-6">BRANDING 2</div> </div> </div> </div> <div class="row" style="height: 1em"></div> </footer> </html>
The 4 links on the left.
左侧的4个链接。 I would like them to be in a left-justified cells of a 2x2 grid no matter how long the text is in them. 我希望它们在2x2网格的左对齐单元格中，无论文本在其中有多长时间。 As you can see, Link 2 is being pushed to the right because Link Number 123 is too long. 如您所见，因为链接号123太长，所以将链接2向右推。 The 2 Branding link on the right.
右侧的2品牌链接。 I would like them to be side-by-side and centered vertically such that the white separator bar matches the longer white separator bar to the left of the center column. 我希望它们并排并垂直居中，以使白色分隔条与中心列左侧较长的白色分隔条匹配。
Can anybody offer any hints on how to accomplish this?? 有人可以提供有关完成此操作的任何提示吗？ Thank you!! 谢谢！！
3 个解决方案
解决方案1
0 2016-11-14 18:18:35
Here's a slightly rewritten code, without the use of Bootstrap (it's still loaded, of course, but not used for the actual footer). 这是一个稍微改写的代码，没有使用Bootstrap（当然，它仍处于加载状态，但未用于实际的页脚）。
footer { background-color: #34385E; color: #FFF; position: fixed; bottom: 0; width: 100%; min-height: 7em; box-sizing: border-box; padding: .5em 0; } footer ul { list-style-type: none; } .footer-links a { line-height: 1.8; color: inherit; width: 100%; } #footer-container div:nth-of-type(2) { border-left: solid; padding-left: 1em; display: flex; flex: 2 1 0; } #footer-container div:nth-of-type(2) p { flex: 1 1 0; margin: auto; } #footer-container div:first-of-type { max-width: 30%; } #footer-container div:first-of-type ul { display: flex; flex-wrap: wrap; position: absolute; top: 50%; transform: translate(0,-50%); } #footer-container div:first-of-type ul li { flex: 1 1 50%; display: block; margin: auto; } #footer-container { display: flex; min-height: 7em; } #footer-container div { flex: 2 1 0; } #footer-container div:last-of-type { margin: auto; border-left: solid; flex: 1 1 0; } #footer-container div:last-of-type ul li { display: inline-block; }
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css"> </head> <body> <footer> <div id="footer-container"> <div> <ul class="footer-links"> <li><a href="#">Link Number 123</a></li> <li><a href="#">Link Number 2</a></li> <li><a href="#">Link Number 3</a></li> <li><a href="#">Link Number 4</a></li> </ul> </div> <div> <p>This information is<br> always three<br> lines long </p> </div> <div> <ul> <li>BRANDING 1</li> <li>BRANDING 2</li> </ul> </div> </div> </footer> </html>
解决方案2
0 2016-11-14 18:24:02
Just add <div> in your HTML: 只需在HTML中添加<div> ：
<p class="footer-links">
<div class= 'footer-left-container'>
<div class= 'option'><a href="#">Link Number 123</a></div>
<div class= 'option'><a href="#">Link Number 2</a></div>
<div class= 'option'><a href="#">Link Number 3</a></div>
<div class= 'option'><a href="#">Link Number 4</a></div>
</div>
</p>
Add in your CSS: 添加您的CSS：
.footer-left-container{ overflow: auto; margin-left: 10px; }
.option{ width: 130px; float: left; margin-top: 1px; margin-left: 2px; }
As for your second question I could not understand what exactly you require. 至于第二个问题，我不明白您到底需要什么。
解决方案3
0 2016-11-14 19:37:24
Hmmm... I guess the comment/answer was deleted. 嗯...我想评论/答案已被删除。 But, it worked out great! 但是，效果很好！ The advice was: 建议是：
- Use a 2/2 grid of rows & columns on the left side to space out the items. 在左侧使用2/2的行和列网格来分隔项目。
- Use white margin lines on both sides of the center chunk, rather than trying to do left margin lines on the center and right chunks. 在中心块的两侧都使用白色边距线，而不要在中心块和右侧块上使用左侧边距线。
Vertical centering still isn't great, so I may mess around with additional answers to try that out. 垂直居中仍然不是很好，所以我可能会用其他答案来解决这个问题。 Thanks! 谢谢！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.