css - 具有 3 列的响应式页脚

Question

我正在尝试创建一个包含三列的页脚(全屏时前两列并排)。调整窗口大小时，三列应该改变位置，因此它们都在一行上。

到目前为止我有这个:https://jsfiddle.net/mtwL5oj0/

HTML:

<div id="u-row">
    <ul>
        <li>000-000-0000</li>
        <li>text@text.com</li>
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
        <li><img src="pic" alt="" style="width:19px;height:19px;"></li>
    </ul>
</div>

<div id="l-row">
    <ul>
        <li>© 2017 text</li>
        <li>ALL RIGHTS RESERVED.</li>
        <li>PRIVACY POLICY.</li>
    </ul>
</div>

CSS:

#u-row { 
    float: center;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
#u-row ul {
    list-style: none;
    margin: 0 auto;
}
#u-row ul  li{
    display: inline-block;
    padding-right: 30px;
    color: #000;
    font-size: 14px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1.5px;
}
#l-row { 
    float: left;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding-top: 15px;
   padding-bottom: 60px;
}
#l-row ul {
    list-style: none;
    margin: 0 auto;
}
#l-row ul  li{
    display: inline-block;
    padding-right: 10px;
    color: #000;
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 3px;
}

如果您查看图像，您会在调整窗口大小时看到它们不会一起进行换行。我尝试再创建一个列，但当窗口全屏显示时，我无法并排显示第一列和第二列。

任何提示/解决方案？

Answer 1

您只需要将上面两列的每一列都包装到 div 中，并为这些 div 设置 display: inline-block;:

.lcol, .rcol {
  display: inline-block;
}
#u-row { 
  float: center;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
#u-row ul {
  list-style: none;
  margin: 0 auto;
}
#u-row ul  li{
  display: inline-block;
  padding-right: 30px;
  color: #000;
  font-size: 14px;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 1.5px;
}
#l-row { 
  float: left;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 60px;
}
#l-row ul {
  list-style: none;
  margin: 0 auto;
}
#l-row ul  li{
  display: inline-block;
  padding-right: 10px;
  color: #000;
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 3px;
}

<div id="u-row">
  <div class="lcol">
    <ul>
		<li>000-000-0000</li>
		<li>text@text.com</li>
	</ul>
  </div>
  <div class="rcol">
	<ul>
		<li><img src="pic" alt="" style="width:19px;height:19px;"></li>
		<li><img src="pic" alt="" style="width:19px;height:19px;"></li>
		<li><img src="pic" alt="" style="width:19px;height:19px;"></li>
		<li><img src="pic" alt="" style="width:19px;height:19px;"></li>
	</ul>
  </div>
</div>
<div id="l-row">
    <ul>
	    <li>© 2017 text</li>
		<li>ALL RIGHTS RESERVED.</li>
		<li>PRIVACY POLICY.</li>
    </ul>
</div>