3動態寬列布局不表

我試圖實現沒有成功以下佈局：3動態寬列布局不表

enter image description here

的要求是：

所有三列，紅，綠色和藍色，必須具有動態寬度，即其寬度必須根據其內容而改變。
灰色的容器必須居中並且其寬度也必須是動態的，具體取決於三列的內容。
綠色列的HTML代碼必須位於源代碼中的其他兩列之前。

這很容易，因爲使用表的蛋糕，除了第三個要求，但我不能設法使用DIV和CSS。我發現的最接近的是「The Perfect 3 Column Liquid Layout (Percentage widths)」，但它有百分比寬度，這不符合我的需要。

來源

2011-10-05 GetFree

我假設你把中心列首先出於搜索引擎優化的原因。真的，你不需要這樣做 - 搜索引擎足夠聰明，可以找出抓取的內容。你可以把你現在擁有的[JSFiddle]（http://www.jsfiddle.net）？ – Bojangles

谷歌免費的CSS模板3列布局，有相當一部分正是你想要的，你可以反向工程的基礎框架。 – Serdalis

@JamWaffles，這不是因爲搜索引擎優化的原因，這是AdSense的原因。首先在源代碼中使用的AdSense廣告是支付更多費用的廣告。我想要中間欄中付費最高的廣告。我目前使用的是我發佈的鏈接中的佈局。 – GetFree

我發現如何首先把中心柱中的代碼

http://jsfiddle.net/gamepreneur/bj6bU/

HTML

<div class="main"> 
    <div class="right-float"> 
     <div class="green"> 
      green 
     </div> 
     <div class="blue"> 
      blue 
     </div> 
    </div> 
    <div class="red"> 
     red 
    </div> 
</div>

CSS

.right-float { 
    float:right 
} 
.green { 
    float:left; 
} 
.blue { 
    float:right 
} 
.red { 
    float:left; 
}

我只是不知道如何做剩下的...加上它是12:40 pm（在我寫這篇文章的時候）

來源

2011-10-07 04:37:39 Samuel

3動態寬列布局不表

回答

相關問題