html - 页脚 div 对齐和文本问题

Question

我正在制作一个页脚，我正在尝试对齐其中的元素，如图所示(实际上， Logo 图像和它下面的文本应该稍微偏离左侧，而不是粘在上面)。

我非常接近，但无法完全按照我想要的方式得到它。每当我尝试缩小页脚时，因为它现在有点太大了，东西会从中泄漏出来。我做错了什么？

此外，我似乎无法将页脚 Logo 图像下的文本更改为与链接相同。不确定这是为什么？

My Fiddle

   <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

它为主要的 3 个元素( Logo 、菜单、社交菜单)使用 flexbox。

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

子元素将均匀分布。你也可以试试 space-around。

当您缩小屏幕尺寸时，某些事情必须堆叠起来。

您也可以考虑使用 bootstrap 的网格来实现这种布局。