在頁腳內的兩個浮動div之間插入一個內嵌塊div

頁腳內有3個div：一個向左浮動，其中一個在中間display-inline：block;並向左飄浮;和一個在最後漂浮右。在頁腳內的兩個浮動div之間插入一個內嵌塊div

到目前爲止，我嘗試的45％最小寬度添加到div左側，但調整時，只是會引起問題。所以..

我該如何將兩個div之間的中間div完全居中？

我想找到一個基於浮動和顯示的解決方案：內聯塊而不是Flexbox。

.copyright { 
 
    font-size: 20px; 
 
    text-align: left; 
 
    margin-left: 20px; 
 
    float: left; 
 
    position: relative; 
 
} 
 
.miamilove { 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    float: left; 
 
} 
 
.termslist { 
 
    font-size: 20px; 
 
    text-align: left; 
 
    margin-right: 10px; 
 
    float: right; 
 
} 
 
.footcol a { 
 
    margin-top: 10px; 
 
    font-size: 20px; 
 
    position: relative; 
 
    padding-right: 20px; 
 
} 
 
.footwrap { 
 
    text-align: center; 
 
    display: inline-block; 
 
    min-width: 100vw; 
 
}

<div class="container-fluid footwrap"> 
 
    <div class="row"> 
 

 
    <div class="footcol"> 
 

 
     <span class="copyright">Copyrr Inc. &copy; 2016</span> 
 

 
    </div> 
 

 

 
    <div class="footcol"> 
 

 
     <span class="miamilove">Made With <i class="fa fa-heart"></i> in Hollywood</span> 
 

 
    </div> 
 

 

 
    <div class="footcol termslist"> 
 

 
     <a href="#">Investors</a> 
 

 

 
     <a href="#">Press</a> 
 

 

 

 
     <a href="#">Blog</a> 
 

 

 

 
     <a href="#">Sign up</a> 
 

 
    </div> 
 

 
    </div>

來源

2016-02-15 ChosenJuan

除非我誤解，你可能需要的彎曲特性。

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

http://jsfiddle.net/qmwfbhtx/2/

來源

2016-02-15 23:14:53

柔性屬性不工作，當你調整窗口的大小。我怎樣才能將這些詞移到下一行而不用一起碾壓？ – ChosenJuan

@ user3771570你的意思是這樣的？ http://jsfiddle.net/qmwfbhtx/3/（刪除大部分未使用的CSS和邊距）實際上，我們可以在這裏下載http://jsfiddle.net/qmwfbhtx/4/ –

好例子！謝謝你幫我解決這個問題！ – ChosenJuan

在頁腳內的兩個浮動div之間插入一個內嵌塊div

回答

相關問題