html - 3 列布局 : Fixed Positions for Divs

Question

所以我目前正在制作一个包含 3 栏的网站模板，并设法重新排列 div 以用于 SEO 目的。我唯一的问题是它在尚未 100% 加载时看起来很糟糕。

这是尚未完全加载时的样子 http://i.imgur.com/JgGKzqL.png

100% 加载:http://i.imgur.com/5RN5IgJ.png

那么有没有可能让div的位置固定呢？

HTML:

<div id="wrapper">
    <div id="content-wrapper">
        <div id="content">I'm first</div>
        <div id="side_a">I'm second</div>
    </div>
    <div id="side_b">I'm third</div>
</div>

CSS:

#wrapper {width: 800px;margin: 0 auto;}
#content-wrapper{float: left;}
#content {width: 400px;float: right;}
#side_a {width: 200px;float: left;} 
#side_b {float: left;width: 200px;}

概览:http://jsfiddle.net/avzLK/

Answer 1

我想如果你设置

    #content-wrapper{float:left; width:600px}

然后你的#content 会在加载#side_a 之前向右浮动，因为它知道父级是 600px 宽。