html - HTML/CSS 向右浮动的问题

Question

我正在尝试创建一个双列设计，其中第二列具有三个子列。

            <div class="section group green">
                <div class="col span_1_of_4">
                    <div class="left">floatleft - </div>
                </div>  
                <div class="col span_3_of_4">
                    <div class="section group right">
                        <div class="col span_1_of_3 ">
                            To be placed on extreme left
                        </div>    
                        <div class="col span_1_of_3 ">
                            To be placed on center
                        </div>    
                        <div class="col span_1_of_3 ">
                           extreme right
                        </div>    
                    </div>    
                </div>  
            </div>        

这是 fiddle http://jsfiddle.net/CBZZU/3/embedded/result/

虽然第二列 (col span_3_of_4) 的包装宽度超过 600 像素，但每个内容都向右聚集。即使句子有足够的大小，也会变成多行。

如何避免内容挤在右边？它们应该放在右边，但应该占据完整的空间而不是换行

Answer 1

像这样？ <强> http://jsfiddle.net/CBZZU/5/

HTML:

<div class="section group green">
    <div class="col span_1_of_4 left">
        <div>floatleft - </div>
    </div>  
    <div class="col span_3_of_4 right">
        <div class="section group">
            <div class="col span_1_of_3 ">
                To be placed on extreme left
            </div>    
            <div class="col span_1_of_3 ">
                To be placed on center
            </div>    
            <div class="col span_1_of_3 ">
               extreme right
            </div>    
        </div>    
    </div>  
</div>

CSS:

.green {
    background:green;
}
.left {
    float:left;
    background:blue;
}
.right {
    width:100%:
    float:right;
    background:red;
}