样式页脚链接与列

Question

我目前正在制作一个带有三列和其中链接的样式页脚。除了我想放在三列下方的版权行之外，一切都很好。问题：它粘在第三列旁边并且不会向下移动。我试着用一些 nbsp 来做到这一点；以及 p 和 br 标签黑客。这在桌面上运行良好，但在移动设备上看起来很糟糕。我想要这个响应。你们知道如何响应式地将版权线左对齐放在三列下方吗？感谢您的帮助。

这就是我到目前为止所得到的。（这里还有一个 fiddle：https://jsfiddle.net/hLLfrcwo/）

<style type="text/css" media="screen">
footer{
 height: auto;
 padding:1px 15px;
 width:auto;
 }
#footer_info_tab{
 float:left;
 width:auto;  
 padding:10px;
}
#footer_resources_tab{
 width:auto;;       
 float:left;
 text-align:justify;
 padding:10px;
 }
#footer_recommend_tab{
float: left;
width:auto;
text-align: justify; 
padding:10px;
}

</style>

<footer>
  <div id="footer_info_tab"><b>Info</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
  <div id="footer_resources_tab"><b>Resources</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
  <div id="footer_recommend_tab"><b>We Recommend</b><p>Bla<br>Bla<br>Bla<br>Bla<br></div>
  <p><br>&nbsp;<p><br>&nbsp;<p><br>&nbsp;<br>&#x24B8;&nbsp;2011-2017 Company. All rights reserved.
</footer>

Answer 1

您应该使用 clear: left; 作为版权段落，使其位于左对齐元素的下方。

样式页脚链接与列

Styling footer links with columns

html

css

footer