如何在同一行内分配多个div /分区

我试图在一行内创建三个不同的<div>s之间的空格。我试图按照this answer，但由于某种原因，我得到了不好的结果：如何在同一行内分配多个div /分区

此外，我不试图将这三个部分均匀地分开，就像他希望在那篇文章中。这正是我要为：

所以我应该有三个独立的部分 - 一个用于“通过门户网站设计自适应网站”，一为社交媒体链接，以及一个滚动到顶部的箭头。这里是我的代码：

HTML：

</body> 
<footer> 
<div class="footer-row"> 

<div class="responsive-website-by"> 
    <p>Responsive Website by <a href="http://www.gatewaywebdesign.co.uk/" target="blank"> 
    Gateway Web Design</a> 
    </p> 
</div> 

<div id="social-links"> 
    <a href="http://youtube.com" target="blank"> 
     <i class="fa fa-youtube" style="font-size: 24px"></i> 
    </a> 
    <a href="http://instagram.com" target="blank"> 
     <i class="fa fa-instagram" style="font-size:24px"></i> 
    </a> 
    <a href="http://twitter.com" target="blank"> 
     <i class="fa fa-twitter" style="font-size:24px"></i> 
    </a>   
    <a href="http://facebook.com" target="blank"> 
     <i class="fa fa-facebook" style="font-size:24px"></i> 
    </a> 
</div> 

<div id="scroll-to-top"> 
    <button id="scroll-to-top-icon" onclick="scrollToTop(1000);">^</button> 
</div> 

</div> 
</footer> 
<?php wp_footer(); ?> 
</html>

CSS：

/* FOOTER */ 

footer { 
background-color: #000000; 
height: 55px; 
} 

.footer-row { 
display: table; 
width: 100%; /*Optional*/ 
table-layout: fixed; /*Optional*/ 
border-spacing: 10px; /*Optional*/ 
} 

#social-links { 
padding-right: 40px; 
display: table-cell; 
} 

#social-links a { 
color: white; 
float: right; 
text-decoration: none; 
margin: 20px; 
margin-top: 15px; 
} 

#social-links a:hover { 
color: #966948; 
transition: all 0.2s ease-in-out; 
} 

.responsive-website-by { 
color: #BCBEC0; 
float: left; 
padding-left: 40px; 
padding-top: 3px; 
display: table-cell; 
} 

.responsive-website-by a{ 
color: white; 
text-decoration: none; 
} 

.responsive-website-by a:hover{ 
color: #966948; 
text-decoration: none; 
transition: all 0.2s ease-in-out; 
} 

#scroll-to-top { 
float:right; 
display: table-cell; 
} 

#scroll-to-top-icon { 
background-color: #966948; 
border: none; 
font-size: 35px; 
height: 30px; 
width: 34px; 
padding-bottom: 31px; 
}

而且不能够空间出来，我想水平的方式，我不明白为什么他们也被推倒在页脚之外。我试着注释掉利润/垫衬对于那些选择，但问题仍然存在：

请帮帮忙！谢谢。

编辑：

您可以在这张截图的responsive-website-by DIV自动按下被躯内看到，更不用说其他的div是如何被下推 - 为什么？

来源

2017-04-22 HappyHands31

你可以创建[小提琴]（http://jsfiddle.net）？ –

@ iuliu.net当然有一点....也请看看上面的修改。 – HappyHands31

Js小提琴链接：https：//jsfiddle.net/jn32sxjr/1/。它看起来像小提琴不支持字体真棒图标，所以我用它们各自的首字母替换它们。 – HappyHands31

关键是要使用divs的百分比。您仍然可以使用table作为父div的构想，table-cells包含它包含的div（如this article中的建议），但为了按照您希望的方式将它们分开，您需要为它们提供百分比。所以，你会在你的HTML有这样的：

<div class="footer-row"> 

    <div class="responsive-website-by"> 
     <p>Responsive Website by <a href="http://gatewaywebdesign.com" target="blank"> 
     Gateway Web Design</a> 
     </p> 
    </div> 

    <div id="social-links"> 
     <a href="http://youtube.com" target="blank"> 
      <i class="fa fa-youtube" style="font-size: 24px"></i> 
     </a> 
     <a href="http://instagram.com" target="blank"> 
      <i class="fa fa-instagram" style="font-size:24px"></i> 
     </a> 
     <a href="http://twitter.com" target="blank"> 
      <i class="fa fa-twitter" style="font-size:24px"></i> 
     </a>   
     <a href="http://facebook.com" target="blank"> 
      <i class="fa fa-facebook" style="font-size:24px"></i> 
     </a> 
    </div> 

    <div id="scroll-to-top"> 
     <img id="back-to-top-icon" src= "http://websiteroot/wp-content/uploads/2017/04/back-to-top-icon-01.jpg" onclick="scrollToTop(1000);"/> 
    </div> 

</div>

这在你的CSS：

.footer-row { 
display: table; 
width: 100%; 
table-layout: fixed; /*Optional*/ 
border-spacing: 10px; /*Optional*/ 
background-color: #000000; 
} 

.responsive-website-by { 
color: #BCBEC0; 
display: table-cell; 
font-family: PT Sans Narrow; 
font-weight: bold; 
font-size: 16px; 
clear: both; 
width: 70% 
} 

#social-links { 
display: table-cell; 
color: #ffffff; 
width: 25%; 
} 

#scroll-to-top { 
display: table-cell; 
width: 5%; 
}

为了得到你想要的间距。

来源

2017-04-23 01:11:38 HappyHands31

我会尝试拿掉.responsive-website-by上的“float”属性，这可能会混淆像高度和填充等属性......从我所看到的，它覆盖了整个屏幕，所以它不应该漂浮。我不知道这是否会直接解决您的问题，但从我所看到的情况来看，这可能与此有关。

来源

2017-04-22 22:30:15 DudeMontag

在'.responsive-website-by'上摆脱'float：left'会导致社交媒体链接下降到'.responsive-website-by' div：https：//jsfiddle.net/jn32sxjr/2/ – HappyHands31

如何在同一行内分配多个div /分区

回答

相关问题