css граница не отображается сверху каждого элемента

Question

Я только что начал с веб-разработки. Я хочу сохранить границу поверх каждой строки продукта. Что-то вроде:

---

описание товара изображение продукта

---

Описание изображения

---

. .

Однако моя граница видна только поверх первого блока. Незлая помощь.

Ниже CSS & HTML Я попытался

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

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

<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; ... это решит вашу проблему.