html - CSS边框未显示在每个元素的顶部

我刚开始进行Web开发。我希望在每个产品行的顶部都保留一个边框。就像是：



产品图片产品说明



图片说明



。
。

但是，仅在第一个街区的顶部可以看到我的边界。请帮助。

以下是我尝试过的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>

最佳答案

加

overflow: auto;

改为.prdDet类样式。这是一个示例：http://jsfiddle.net/dvFqn/

为什么必须添加该样式？因为.prdDes的float设置为left，所以它以某种方式脱离了标准文档流，因此它的父级.prdDet并未为其内容设置高度/宽度。设置overflow: auto可以修复该行为，并使.prdDet与其内容一样高和宽，这是该情况下的所需行为。

关于html - CSS边框未显示在每个元素的顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15062146/