Question

我刚刚开始进行网页开发。我希望在每个产品行上都有一个边框。类似的东西：

产品图片产品说明

图片说明

。

然而，我的边框只能在第一个区块的顶部看到。请帮助。

以下是CSS＆amp; 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

您在prdDes课程中使用过float:right;。这意味着元素将浮出div所包含的div，除非它们的父div也不浮动。因此对于prdDet课程，您必须使用float:left; ...这样可以解决您的问题。

css边框没有显示在每个元素的顶部

2 个答案: