Question

我试图获取我的网站的页脚，其中包含三个由三个矢量图标和文本组成的列，以跨越网站的宽度。我希望文本位于图标下方，并使每个图标和文本块居中并在中心均匀分割。我的代码是在白色的列之间产生一条垂直线，当我希望页脚的整个长度是材质为紫色时。它也没有跨越网站的宽度。这是我的HTML：

<footer>
<div>
 <img src="http://minimalwebdesigns412.com/Images/Oval2_Group@2x.png"   alt="Responsive" width="150" height="150">
    <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</section>
        </div>
<div>   
 <img src="http://minimalwebdesigns412.com/Images/Oval1_Group@2x.png" alt="Cloud" width="150" height="150">
     <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</section>
</div>
<div>
  <img src="http://minimalwebdesigns412.com/Images/Oval3_Shape@2x.png" alt="Email" width="150" height="150">
    <section> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.</section>
 </div>

这是css：

    footer div {
    width: 32%;
    background: rgba(113,15,154,0.73);
    border: 1px solid rgba(255,255,255,0.00);
    display: inline-block;
    vertical-align: top;
    overflow-x: none;

    }

footer div section {
    max-width: 100%;
    margin: auto;
    padding: 0;
    text-align: inherit;
    }

您可以在此处找到我的测试网站：

http://test.minimalwebdesigns412.com

任何帮助都将不胜感激。

Answer 1

您可以尝试：

footer {
 background: rgba(113,15,154,0.73);
}

footer div {
  width: 32%;
  border: 1px solid rgba(255,255,255,0.00);
  display: inline-block;
  vertical-align: top;
  text-align: center;
}

footer div section {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  text-align: inherit;
}

JSBIN： http://jsbin.com/yuwataluni/1/

Answer 2

制定你的位置：亲戚和你的页脚

footer{
position: absolute;
left: 0;
right: 0;
bottom: 0;
border: 1px solid black;
margin: 0;
padding: 5px;
}

你的css还有其他问题，但是你的所有页脚html都放在页脚的旁边。

Answer 3

给3个div的宽度为33.333％，并将它们浮动在页脚中。然后清除浮子。请参阅下面的演示。红色轮廓是容器 - 可能是您的页面正文。此外，使用单个百分比样式替换图像大小声明，然后您可以将容器宽度设置为您喜欢的任何内容，并且3个div（和图像）将缩放。

＆＃13;

#container {
  border: 2px solid #ff0000;
  width: 800px;
}
footer {
  width: 100%;
}
footer div {
  width: 33.3333333%;
  background: rgba(113, 15, 154, 0.73);
  float: left;
  vertical-align: top;
  overflow-x: none;
  text-align: center;
}
footer div section {
  max-width: 100%;
  padding: 0;
  text-align: inherit;
}
footer div img {
  width: 60%;
}

＆＃13;

<div id="container">
  <footer>
    <div>
      <img src="http://minimalwebdesigns412.com/Images/Oval2_Group@2x.png" alt="Responsive">
      <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore.</section>
    </div>
    <div>
      <img src="http://minimalwebdesigns412.com/Images/Oval1_Group@2x.png" alt="Cloud">
      <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore.</section>
    </div>
    <div>
      <img src="http://minimalwebdesigns412.com/Images/Oval3_Shape@2x.png" alt="Email">
      <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore.</section>
    </div>
    <br style="clear:both">
  </footer>
</div>

＆＃13;

Answer 4

// make the footer completely purple
footer {
    background: rgba(113, 15, 154, 0.73);
}

// to span the width of the site
// divided evenly
// icons and text center
footer div {
    width: 33%;
    display: inline-block;
    vertical-align: top;
    text-align: center; 
}

请注意：
- 你没有页脚关闭标签

JSBIN http://jsbin.com/giqabiravi/1/

页脚Div，3列，带图像和文字

4 个答案: