각 요소 상단에 CSS 테두리가 표시되지 않습니다.

Question

웹 개발을 시작했습니다. 모든 제품 행 상단에 경계선을 유지하고 싶습니다. 같은 뭔가 :

---

제품 이미지 제품 설명

---

이미지 설명

---

. .

그러나 내 경계는 첫 번째 블록의 맨 위에 만 표시됩니다. 친절하게 도와주세요.

는 아래 CSS & 내가

.prdDes 
{ 
    width:82%; 
    float:right; 
    padding-top:5px; 
} 

.prdDet 
{ 
    border-top-color:#ddd; 
    border-top-style:dashed; 
    border-top-width:1px; 
} 

을 시도 HTML

<div class="prdDet"> 
    <img src="images/profile/0.png" class="productimg" /> 
    <div class="prdDes"> 
     <h3>Product 1</h3> 

     <p>Details about the product1. Specifications etc.</p> 
     <ul> 
      <li>Spec1</li> 
      <li>Spec2</li> 
      <li>Spec3</li> 
      <li>Spec4</li> 
     </ul> 
    </div> 
</div> 
<div class="prdDet"> 
    <img src="images/profile/14.png" class="productimg" /> 
    <div class="prdDes"> 
     <h3>Product 2</h3> 

     <p>Details about the product2. Specifications etc.</p> 
     <ul> 
      <li>Spec1</li> 
      <li>Spec2</li> 
      <li>Spec3</li> 
      <li>Spec4</li> 
     </ul> 
    </div> 
</div> 

Answer 1

이

overflow: auto; 

-.prdDet 클래스 스타일을 추가합니다. 다음은 예입니다. http://jsfiddle.net/dvFqn/

왜 그 스타일을 추가해야합니까? .prdDes은 왼쪽으로 설정된 부동 소수점을 가지고 있기 때문에 표준 문서 플로우에서 어떻게 든 벗어나므로 부모의 .prdDet은 내용에 높이/너비를 설정하지 않습니다. overflow: auto을 설정하면 해당 동작이 수정되어 .prdDet이 내용과 같이 높고 넓어집니다. 그 상황에서 바라는 동작은 무엇입니까?

Answer 2

float:right;을 prdDes 클래스에 사용했습니다. 이것은 부모 div가 떠 다니지 않는 한 요소가 포함 된 div 밖으로 떠 다니는 것을 의미합니다. 따라서 prdDet 클래스의 경우 float:left;을 사용해야합니다 ... 그러면 문제가 해결됩니다.