需要幫助修復CSS四列表

Question

我遇到了一些問題，我的CSS四列表。

當其中一張照片較短時，照片會變得不對勁。 （見截圖）

這是CSS：

#results{background:#fff;padding:0 0 26px} 
.result{float:left;width:25%} 
.result-cover{border:1px solid #ccc;margin:0 4px 8px;padding:0 0 6px} 
.result-img{border:1px solid #ccc;height:auto;margin:9px;overflow:hidden} 
.result-img img{display:block;margin:0;width:100%} 
.result .row{background:#fff;font:400 16px/20px 'MdCn',Arial,sans-serif;height:18px;overflow:hidden;padding:0 10px;text-transform:uppercase} 
.result .row.stripe{background:#f6f9fb} 
.result .row:last-child{font-family:'BdCn',Arial,sans-serif} 
.prop{color:#373736;float:left;width:40%} 
.value{color:#0f92cb;float:right;width:60%} 

這是我的HTML片段：

<div id="results" class="clr"> 
<div id="results-inside" class="clr block"> 
    <div class="result"> 
     <div class="result-cover"> 
     <div class="result-img"><img src="images/res.jpg" alt="" /></div> 
     <a class="result-title" href="#">31698-1</a> 
     <div class="result-props"> 
      <div class="row clr"> 
      <div class="prop">Code1:</div> 
      <div class="value">29A</div> 
      </div> 
      <div class="row clr"> 
      <div class="prop">Code2:</div> 
      <div class="value">24A0</div> 
      </div> 
      <div class="row clr"> 
      <div class="prop">Code3:</div> 
      <div class="value">0</div> 
      </div> 
      <div class="row clr"> 
      <div class="prop">Code4:</div> 
      <div class="value">627A</div> 
      </div> 
     </div> 
    </div> 

但是，當畫面中的一個短對齊變得won。。

Answer 1

解決我的問題使用：nth-​​child（） 謝謝你CBroe。

我意識到：nth-​​child（）可能不適用於較舊的瀏覽器。 但這對我的情況不是問題。

謝謝

Answer 2

你可以做的是在你的4個方塊周圍添加一個div，並將它左移，並給它100％的寬度，以清除每一行。