为什么这个CSS似乎被1px关闭？

Question

为什么这个表行1px关闭？

这是调试器break pic，xhtml，css。

基本上我将x尺寸设置为450像素。然而，一行不喜欢这样，打破了我的整个表。将其设置为449像素可以解决问题。

我仍然需要将我的列宽度从105px更新为150px。

显然将其设置为449px可以解决问题，但我需要知道为什么？黑魔法？

<div class="Ab1_2">
  <form enctype="multipart/form-data" id="f0" method="post" action="">
    <div class="t1">
      <div class="t1_r1">
        <div class="t1_c1"><p class="c">Email</p></div>
        <div class="t1_c1"><p class="c">Password</p></div>
        <!-- <div class="t1_c2"><p class="c">Coming Soon <input class="cb" type="checkbox" name="f0a" value="value1"/></p></div> -->
      </div>
      <div class="t1_r2">
        <div class="t1_c1"><input class="te6" type="text" name="f0b"/></div>
        <div class="t1_c1"><input class="te6" type="password" name="f0c"/></div>
        <div class="t1_c2"><a id="f0d" href="javascript:void(0)" class='but'>Login</a></div>
      </div>
      <div class="t1_r3"><span id="f0e"></span>
      </div>
    </div>
  </form>
</div>

CSS

.t1
  {
  height:62px;
  width:450px;
  }
.t1_r1
  {
  height:15px;
  width:450px;
  }
.t1_r2
  {
  height:32px;
  width:449px;
  }
.t1_r3
  {
  height:17px;
  width:450px;
  }
.t1_c1
  {
  width:150px;
  float:left;
  }
.t1_c2
  {
  width:105px;
  float:left;
  }
input.te6
  {
  padding-top:5px;
  width:130px;
  height:20px;
  border:1px solid #bbbbbb;
  font-size:12px;
  }

Answer 1

这是您获得的“不正确”布局：

[Row1Col1][Row1Col2]
                    [Row2Col1]
[Row2Col2][Row2Col3]

将第2行宽度设置为449px时没有看到它的原因是[Row2Col1]元素不再适合与[Row1Col1]和[Row1Col2]元素在同一行。

用细胞填充每一行，或者更好的是，在开始新行时清除浮动。