CSS 4 열 테이블을 수정하는 데 도움이 필요합니다.

Question

CSS 4 열 테이블에 문제가 있습니다.

사진 중 하나가 짧아지면 딱딱 해지지 않습니다. 이건 내 HTML 코드가

#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%} 

입니다 :

이것은 CSS입니다 (스크린 샷 참조)

<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

내 문제는 다음을 사용하여 해결되었습니다. nth-child() CBroe.

실감 : nth-child()는 이전 브라우저에서 작동하지 않을 수 있습니다. 하지만 그건 내 사건에 대한 문제가 아닙니다.

고마워요

Answer 2

4 개 블록 주위에 div를 추가하고 왼쪽으로 떠서 각 행을 지우는 너비를 100 %로 지정하면됩니다.