html - 列不对齐

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
• 添加了一个带有 clearfix ( clear: both;)的 div

你可以在这里查看：http: //jsfiddle.net/pJefg/2/