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 に答える