Question

我正在尝试一个页脚，我正在尝试将项目对齐，如图所示（实际上徽标图像和文本下面的文本应该稍微偏离左侧而不是粘在上面）。

我非常接近，但不能完全按照我想要的方式得到它。每当我试图让页脚变小时，因为它有点太大，此时它会从它泄漏出来。我做错了什么？

此外，我似乎无法将页脚徽标图像下的文本更改为与链接相同。不知道为什么会这样？

   <div class="row-2">
   <div class="logofooter">
                   <a class="logofooter" href="index.html"> <img src="http://lorempixel.com/output/abstract-q-c-100-100-1.jpg"></a>
                   <div class="logocopyright">
                       <a href="index.html"> Copyright info</a>
                   </div>
          </div>
       <div class="legal">
                 <ul class="legal">
                     <li><a href="legal.html">Legal Policy</a></li>
                     <li><a href="contact.html">Contact</a></li>
                     <li><a href="privacy.html">Privacy</a></li>
                    <li><a href="disclaimer.html">Disclaimer</a></li>
                </ul>
       </div>
            <div class="social">    

                <ul class="smm">
                    <li><a class="facebook" href="https://www.facebook.com">    <img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"></a></li>
                    <li><a class="twitter" href="https://www.twitter.com"><img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"> </a></li>
                    <li><a class="instagram" href="https://www.instagram.com"><img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"> </a></li>
                </ul>
            </div>
   </div>


</footer>
</body>

Answer 1

这对你有用吗？ http://codepen.io/anon/pen/vNXKMa?editors=110

它使用flexbox作为主要的3个元素（徽标，菜单，社交菜单）。

.row-2{
  display:flex;
  justify-content: space-between; 
}

子元素将均匀分布。你也可以试试空间。

当你缩小屏幕尺寸时，事情必须在某些时候叠加。

你也可以考虑使用bootstrap的网格进行这种布局。

Answer 2

请尝试这一个：

frames=n

See the Demo Page

页脚div对齐和文本问题

2 个答案: