如何在同一行內分配多個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 /分區

回答

相關問題