需要帮助来修复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（）可能无法使用旧浏览器。 但这对我的案子来说不是问题。

谢谢