0

我刚刚开始进行 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>
4

2 回答 2

1

添加

overflow: auto;

到.prdDet课堂风格。这是一个例子：http: //jsfiddle.net/dvFqn/

为什么有必要添加该样式？因为.prdDes将浮动设置为左侧，它以某种方式从标准文档流中消失，所以它的父.prdDet级没有将它的高度/宽度设置为它的内容。设置overflow: auto修复了该行为，并使其.prdDet内容与其内容一样高和广泛，在这种情况下所需的行为是什么。

于 2013-02-25T07:42:20.477 回答
0

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

于 2013-02-25T07:55:52.297 回答