保持側邊間距等於兩側

我試圖在每個側邊欄的任一側獲得相等的間距。我希望它是：| |側邊欄| |內容| |側邊欄| |。 https://jsfiddle.net/db89880q/ 現在，側邊欄的兩側並沒有以相等的間距坐着。保持側邊間距等於兩側

.nav_projects { 
    top: 30px; 
    left: 30px; 
    position: fixed; 
    top: 50%; 
    left: -66px; 
} 

.nav_studio { 
    right: -40px; 
    position: fixed; 
    top: 50%; 

}

來源

2016-01-18 user2252219

而你遇到的問題是？ – j08691

@ j08691現在，側邊欄並不是坐在兩側有相同的空白空間。 – user2252219

啊！你認爲旋轉90度的東西會隱藏你真正的意圖嗎？你想**垂直居中**，這是CSS宗教中的致命罪行。你不應該試圖垂直居中......因爲這是CSS。並且不敢使用與垂直對齊的表td ......這更加令人反感:-) – 6502

你可以用同一個div裏面的側邊欄的內容。然後用margin: 0 auto;來定位它。然後在差異中，您可以使用margin-left和margin-right在內容和兩個側邊欄之間留出空間。

來源

2016-01-18 20:20:15 nstoitsev

我會親自去做這件事。

http://codepen.io/midgitsuu/pen/QyOdGd

HTML：

<div class="outer_container"> 
    <div class="sidebar sidebar_left"> 
    <p>Left Sidebar</p> 
    </div> 
    <div class="center_content"> 
    <p>Center Content</p> 
    </div> 
    <div class="sidebar sidebar_right"> 
    <p>Right Sidebar</p> 
    </div> 
</div>

CSS：

body { 
    margin:0; 
} 
.outer_container { 
    width:100%; 
    height:500px; 
    background:lightgray; 
} 
.outer_container div { 
    height:100%; 
} 
.center_content { 
    display:inline-block; 
    width:80%; 
    background:blue; 
} 
.sidebar { 
    width:5%; 
    background:red; 
} 
.sidebar_left { 
    float:left; 
    margin-right:5%; 
} 
.sidebar_right{ 
    float:right; 
    margin-left:5%; 
}

基本上，獲得被設置爲100％的寬度（身體的寬度），則大小的主/外部容器或者使用最終相當於100％的百分比將利潤率應用於所有內部。這使得你的站點響應，儘管寬度要低得多，你可能會希望媒體查詢改變佈局。因此，我更喜歡在你的情況下使用浮游物，因爲看起來你想把側邊欄推向兩側。

來源

2016-01-18 20:48:57 Brett84c

保持側邊間距等於兩側

回答

相關問題