列不对齐

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/