需要幫助修復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>

但是，當其中一張圖片更短時，對齊方式就會變得不穩定。

Answer 1

您可以做的是在4個區塊周圍添加一個div並將其向左浮動，並為其設置100％的寬度，該寬度將清除每一行。

Answer 2

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

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

謝謝