列未对齐

Question

为什么我的列未正确对齐？上面似乎有差距。有没有去，我可以让他们自动设置包装它的宽度在892px;

http://jsfiddle.net/pJefg/

HTML：

<div class="leftColParts"> 
    Text Left 
</div> 
    <div class="rightColParts"> 
    Text Right 
</div> 

CSS：

.leftColParts{ 
    width:215px; 
    background-color:red; 
} 
.rightColParts{ 
    float: right; 
    display: inline-block; 
    width:440px; 
    clear:both; 
    background-color: green; 
} 

Answer 1

是这你需要什么？

http://jsfiddle.net/pJefg/7/

HTML：

<div class="wrapper"> 
     <div class="leftColParts">Text Left</div><!-- 
    --><div class="rightColParts">Text Right</div> 
<div> 

-

CSS：

.wrapper { 
    width: 892px; 
} 
.wrapper:after { 
    clear:both; 
    content: "."; 
    height: 0; 
    visibility:hidden; 
} 
.leftColParts { 
    float:left; 
    width:215px; 
    background-color:red; 
} 
.rightColParts { 
    float:right; 
    width:440px; 
    background-color: green; 
} 

Answer 2

.leftColParts{ 
    width:215px; 
    background-color:red; 
    float: left; 
} 
.rightColParts{ 
    float: left; 
    width:440px; 
    background-color: green; 
} 

试试这个。

或者这样：

.leftColParts{ 
    width:215px; 
    background-color:red; 
    display: inline-block; 
} 
.rightColParts{ 
    display: inline-block; 
    width:440px; 
    clear:both; 
    background-color: green; 
} 

Answer 3

我已经编辑什么，我认为这是你想要的小提琴。

我所做的：

• 都飘来的div留下
• 添加一个div与clearfix（clear: both;）

您可以点击此处查看：http://jsfiddle.net/pJefg/2/