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;：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

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

否则，您将需要使用media queries来更改在不同屏幕尺寸下应用的规则。

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列反应灵敏的页脚

3 个答案: