Question

我的DIVS和我的页脚出了问题，基本上我想要的是三个分开的div，上面有一个图标，一个标题和一个或两个简短的句子，在这里，

，你看我是否在我的页面上添加信息，使其滚动，页脚不在页面底部。我似乎无法使DIVS居中并允许它们，所以如果屏幕尺寸开始变小，我希望它们折叠成一列。如果有人可以帮我解决我的小问题，我将不胜感激，谢谢。

HTML

＆＃13;

<section id="boxes">
    <div>
    <div class="box">
    <img src="ico/clock.png">
    <h3>Time</h3>
    <p>Lorem ipsum ante sem varius consequat commodo libero morbi curabitur, 
    enim maecenas imperdiet etiam per ut semper tempor himenaeos, non fringilla 
    congue vivamus aptent cubilia aliquam mattis.</p>
    </div>

    <div class="box">
    <img src="ico/settings.png">
    <h3>Work</h3>
    <p>Lorem ipsum ante sem varius consequat commodo libero morbi curabitur, 
    enim maecenas imperdiet etiam per ut semper tempor himenaeos, non fringilla 
    congue vivamus aptent cubilia aliquam mattis.</p>
    </div>

    <div class="box">
    <img src="ico/recycle.png">
    <h3>Recycle</h3>
    <p>Lorem ipsum ante sem varius consequat commodo libero morbi curabitur, 
    enim maecenas imperdiet etiam per ut semper tempor himenaeos, non fringilla 
    congue vivamus aptent cubilia aliquam mattis.</p>
    </div>

    </section>

    <footer>
	<p>Mandurah Jetty Maintenance | Copyright &copy 2017</p>
    </footer>

＆＃13;

CSS

#boxes {
  margin-top: 500px;
  display: inline-block;
}

#boxes .box {
  float: left;
  text-align: center;
  width: 30%;
  padding: 10px;
}

#boxes .box img {
  width: 90px;
}

footer{
  padding: 20px, 0px, 0px, 0px;
  color: #ffffff;
  background-color: #333;
  text-align: center;
  width: 100%;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

Answer 1

将页脚固定在窗口上，即position:fixed

将id添加到包含所有其他div名称box_container的div容器中

在box_container中应用display flex属性

添加媒体查询，以便在窗口调整大小以适应移动设备时，box_container的灵活安装更改为column。我只添加了一个移动媒体查询。你可以添加更多

将margin-bottom添加到body标记。为什么？还记得你把页脚固定好吗？它可能会阻止内容

click here for demo

中心DIVS＆amp;页脚问题

1 个答案: