css - 行被相邻的内容拉长

Question

我正在维护一个使用 bootstrap 2.3.2 的网页，我遇到了以下问题。该页面分为侧边栏和主容器，主容器内有流动的行。这些行根据侧边栏中的内容向下移动。谁能解释为什么会这样，和/或提出解决方法？下面是一些代码，fiddle here .

HTML:

<div class="container-fluid">
<div class="left-div">
    <p>Some content here</p>
    <ul class="nav nav-list">
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
        <li><a>Blah</a></li>
    </ul>    
</div>
<div class="right-div">
    <div class="row-fluid">
        <div class="span6">
            <h3>Stuff here</h3>
        </div>
        <div class="span6">
            This row gets stretched vertically
        </div>
    </div>
    <div class="row-fluid">
        <p>This content gets pushed down</p>
    </div>
</div>   
</div>

CSS:

.left-div {
  width: 200px;
  background-color: #DDDDDD;
  float: left;
}

.right-div {
  margin-left: 220px;
  border-color: #DDDDDD;
  border-width: 2px;
  border-radius: 3px;
  border-style: solid;
  padding: 25px;
}

Answer 1

首先，不要将像素与 % 混合(流体是 %)，并尝试使用 bootstrap 网格，你会得到更少的跳动行为!

.right-div {
  /* --> margin-left: 220px; <-- */
  border-color: #DDDDDD;
  border-width: 2px;
  border-radius: 3px;
  border-style: solid;
  padding: 25px;
}


.left-div {
  /* --> width: 200px; <-- */
  background-color: #DDDDDD;
  /* --> float: left; <-- */
}

左边的 float 是个问题!不要使用带有流动行的 float 或使用 clearfix afterwords，因为我认为流动行大量使用 float ......此外，左边距是问题，右边距有点 float 但实际上不是。