具有 3 列的响应式页脚

Question

我正在尝试创建一个包含三列的页脚（全屏时顶部的两列并排）。当 window 调整大小时，三列应该改变位置，因此它们都在一行上。

到目前为止我有这个：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;
}

如果您查看图片，您会在调整 windows 大小时看到它们没有一起换行。我试图再创建一个列，但是当 window 全屏显示时，我无法并排显示第一列和第二列。

任何tips/solutions？

Answer 1

您可以使用像 Bootstrap 这样的响应式 CSS 框架来快速轻松地实现这一目标。

否则，您将需要使用 media queries 更改适用于不同屏幕尺寸的规则。

Answer 2

您只需要将上面两列的每一列都包装成 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>

Answer 3

试试这个

<div id="u-row">
            <div>000-000-0000</div>
            <div>text@text.com</div>
            <div>
                <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">
        &copy; 2017 text ALL RIGHTS RESERVED. PRIVACY POLICY.
        </div>

#u-row { 
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  flex-wrap: wrap;
}

#u-row > div {
    padding: 0 15px;
}

@media screen and (max-width: 700px) {
    #u-row > div {
        width: 100%;
        text-align: center;
        padding-bottom: 10px;
    }
    #u-row {

    }
}

#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 { 
  text-align: center;
  padding-top: 15px;
  padding-bottom: 60px;
}

#l-row ul {
  list-style: none;
  margin: 0 auto;
}

#l-row div {
  display: inline-block;
  padding-right: 10px;
  color: #000;
  font-size: 10px;
  font-family: 'Open Sans', sans-serif;
  letter-spacing: 3px;
}

现场演示 - https://jsfiddle.net/grinmax_/mtwL5oj0/1/

具有 3 列的响应式页脚

Responsive footer with 3 columns

css

footer

responsive