文本沒有包裹在它自己的下面

我有一個div的集合作爲可變寬度的行，因爲它們在可調整大小的容器內。 div包含4組我希望並排顯示的元素。在這4組中，2組需要變寬度，而其他2組是固定的。除了最後一組沒有按照我希望的方式包裝外，我主要工作。由於可變寬度兄弟，我不能在其上留下餘量。我也嘗試將每個項目設置爲inline-block，但是這迫使最後一組具有比可用空間大的奇怪計算寬度，並且總是將其強制爲低於其他3組。文本沒有包裹在它自己的下面

Here's a live example/fiddle和源如下：

HMTL：

<div class="row level-2 note subtype-new subtype-fancy"> 
    <div class="leading col"><a class="note-icon icon" href="javascript:void(0)"></a></div> 
    <div class="padded"> 
     <div class="status-icon-wrapper col"> 
      <span class="new-icon icon"></span> 
      <span class="modified-icon icon" title="Revised Code"></span> 
     </div> 
     <div class="codes-wrapper col"> 
      <span class="codes"><a href="javascript:void(0)" class="code ">XYZ</a></span> 
     </div> 
     <div class="icon-wrapper col"> 
      <span class="fancy-icon icon"></span> 
      <span class="plain-icon icon"></span> 
      <span class="disabled-icon icon"></span> 
     </div> 
     <div class="description">Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here. Description text that should wrap underneath of itself should go here.</div> 
    </div> 
</div>

CSS：

.row {margin: 3px 0 3px 2px; overflow: hidden; outline: 1px solid #000} 
.col {float: left} 
.icon {display: inline-block; height: 16px; width: 16px; line-height: 16px; outline: 1px dotted #0CC; background-color:} 
.level-1 .padded {padding-left: 30px} 
.level-2 .padded {padding-left: 60px} 

.codes-wrapper, 
.icon-wrapper {padding-right: 3px} 

.status-icon-wrapper, 
.icon-wrapper {width: 17px} 

.row .icon {display:none} 
.note-icon {background-color: #F0F} 

.fancy-icon {background-color: #CC0} 
.plain-icon {background-color: #C00} 
.new-icon {background-color: #0CC} 

.note .note-icon, 
.subtype-new .new-icon, 
.subtype-modified .modified-icon, 
.subtype-fancy .fancy-icon, 
.subtype-plain .plain-icon, 
.subtype-disabled .disabled-icon 
{display: inline-block}

來源

2013-06-19 ryan