以側邊欄爲中心的以流體爲中心的內容塊

我在這裏拉我的頭髮。試圖想出一個簡單的響應式佈局，其中兩個流體盒彼此相鄰排列。主盒子必須始終位於瀏覽器窗口中央，而另一個則應在其右上角對齊。請參見下面示例圖像 -以側邊欄爲中心的以流體爲中心的內容塊

enter image description here

嘗試涉及負百分比和三列布局的人造不同的方法，但它只是不工作。

來源

2013-10-22 Staffan Estberg

這個盒子有固定寬度或動態寬度嗎？ – DaniP

動態寬度。對不起，如果不夠清楚，但對我來說流體=動態。 –

因此請檢查答案和鏈接 – DaniP

演示：http://dabblet.com/gist/7201560

標記：

<div class='container'> 
    <div class='main-col'></div> 
    <div class='right-col'></div> 
</div>

CSS：

.container { 
     text-align: center; 
     } 

    .main-col, .right-col { 
     display: inline-block; 
     vertical-align: top; 
     text-align: left; 
     margin-right: -4px; /* css-tricks.com/fighting-the-space-between-inline-block-elements/‎ */ 
     } 

    .main-col { 
     width: 50%; 
     margin-left: 20%; /* equal to .right-col's width */    
     } 

    .right-col { 
     width: 20%; 
     }

這裏發生了什麼：

居中的主柱和右側列有display: inline-block，和他們」通過給它們的容器重新集中在視口中。儘管如此，他們仍然沒有以你想要的方式爲中心。由於它們是兄弟元素，因此可以使用margin將主列向左推，其值等於右列的寬度，基本上是居中。

來源

2013-10-28 18:18:30 carpenumidium

這種方法看起來很棒，非常感謝你！ –

嗨，你可以檢查我的嘗試在這個鏈接http://jsfiddle.net/WHq8U/17/。我不得不使用一個小jQuery來計算側邊欄absolute position。讓我知道你對此的看法。

來源

2013-10-22 16:48:34 DaniP

感謝您的建議Danko，儘管我不想使用定位和JavaScript來完成此任務。 –

以側邊欄爲中心的以流體爲中心的內容塊

回答

相關問題