居中動態寬度分區

我有一個有2列的頁面。第一列是動態寬度。它包含一些表格中的表格數據。第二列是固定寬度的導航內容。居中動態寬度分區

2列是div左浮動。我需要完成2件事。

我需要在頁面上居中的2周的div。例如，如果第一個div是由其內部的數據指定的600px寬，並且第二個div是固定的200px，則居中點爲400px。
如果瀏覽器窗口調整大小，我不希望第二個div被換掉。

我想我可能有窩2周的div另一個div中，使用JavaScript設置父DIV寬度，然後居中。

我創造了這個小提琴幫助說明。 http://jsfiddle.net/darthg8r/uhKdt/

2012-01-08 Darthg8r

包圍他們有一個div，並設置其風格：

width: (whatever you need) 
margin: 0 auto; // this centers the div

您可以根據需要使用JavaScript動態地設置寬度。只要它小於周圍容器的100％，它就會保持居中。

來源

2012-01-08 19:07:05

OP具體說容器寬度是未知的。 – Wex 2012-01-09 08:36:06

我決定不添加容器div並使用javascript就無法做到。它實際上工作正常，但我有點擔心跨瀏覽器compat和頁面加載「閃光燈」。 – Darthg8r 2012-01-09 13:57:58

你可以用下面的代碼實現這一點：

HTML：

<div id="wrapper"> 
    <div id="container"> 
     <div id="variable">test</div> 
     <div id="fixed">test</div> 
    </div> 
</div>

CSS：

#wrapper { overflow: hidden; } 
#container { 
    float: left; 
    position: relative; 
    left: 50%; } 
#container > div { 
    float: left; 
    position: relative; 
    right: 50%; 
    height: 300px; } 
#variable { 
    background: red; 
    width: 300px; } 
#fixed { 
    background: blue; 
    width: 200px; }

前瞻：http://jsfiddle.net/Wexcode/mreLt/

您還可以通過包裝達到這種效果一個容器中的兩個元素，將它們設置爲display: inline-block，最後將其容器設置爲text-align: center。
~~答案比這個稍微複雜一些，所以讓我知道你是否想選擇這條路線。~~

爲了使它不會落入下一行，請使用inline-block。

<div id="container"> 
    <div id="variable"> 
     <p>test</p> 
    </div><div id="fixed"> 
     <p>test</p> 
    </div> 
</div>

CSS：

body { margin: 0; } 
#container { 
    color: #fff; 
    text-align: center; 
    white-space: nowrap; } 
#container > div { 
    height: 300px; 
    display: inline-block; } 
#variable { 
    background: red; 
    width: 100px; } 
#fixed { 
    background: blue; 
    width: 200px; }

預覽：http://jsfiddle.net/Wexcode/mreLt/2/

來源

2012-01-09 08:41:27 Wex

您示例中的變量列不是真正可變的。簡單地在CSS中設置一個更大的寬度就可以打破它。在我的場景中，直到運行時才知道變量列的寬度。 – Darthg8r 2012-01-09 13:55:11

我做了一些編輯 - 這應該可以防止你的頁面閃爍。 – Wex 2012-01-10 09:00:16

居中動態寬度分區

回答

相關問題