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动态宽列布局不表

回答

相关问题