0

わかりました、整列に2つの問題があります。

まず、div の左側に 2 つの境界線が作成されていますが、その理由がわかりません。作成する境界線は 1 つだけです。幅は 1px なので、そのように振る舞うべきではありませんか?

2 番目の問題は、紫色の div (下に 2 つある) です。これはこの写真には含まれていませんが、基本的にはこのクラスの div です。

.reviewsContent {
    clear:both;
    display: block;
    margin:0;
    padding:0;
    margin-left: 25px;
    background-color: purple;
}

この div (紫) はブロックであるため、青の div と重なってはいけませんが、重なります..

ありがとう ！

拡大写真はこちら

これはhtmlコードです

<div class="productWrapper">
        <div class="productName">LG 6.3 Cu. Ft. Self-Clean Smooth Top Range <br> <span class="categoryText">Dishwashers</span></div>
        <div class="productContent">
            <div class="subtitleText">Product Description</div>
            <p class="productText">
                some product descrip tion some product descrip tion some product descrip tion some product descrip tion some product descrip tion 
                some product descrip tion some product descrip tion some product descrip tion
            </p>
            <div class="subtitleText">Product Details</div>
            <p class="productText">
                Width: <br>
                Height: <br>
                Weights: <br>

            </p>
        </div>

        <div class="productImage">
            <img class='productImage' src='images/c000002.jpg'>
            <div class="productImageInfo">In-stock: 10 ................................... ADD CART BUTTON</div>
        </div>

        <div class="reviewsContent">Reviawe fawe a..</div>
        <div class="reviewsContent">Reviews..</div>
    </div>

そしてこれがcssシートです

.productWrapper {
    /*background-color: red;*/
    margin:0;
    padding:0;
    /*height:1000px;*/
    margin-left: 230px;
    padding-top:10px;
    /*font-family: "Open Sans",Verdana,sans-serif;*/
    font-family: calibri;
    color: #000000;
}

.productName {
    font-size: 24px;
    //font-size: 22px;
    margin:0;
    padding:0;
    margin-left:25px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    color: #444444;
    /*background-color:green;*/
    border-bottom: 1px solid;
    border-color: #E4E4E4;
}

.productContent {
    display: inline-block;
    vertical-align: top;
    background-color:gray;
    margin:0;
    padding:0;
    margin-left:25px;
    width: 350px;
    border: none;
}

.productImage {
    display: inline-block;
    vertical-align: top;
    width: 330px;
    max-width: 330px;
    height: 330px;
    max-height: 360px;
    padding:0;
    margin:0;
    padding-left: 8px;
    border-left: 1px solid;
    border-color: #E4E4E4;
    /*float: right;
    //padding-left: 5px;
    background-color:blue;*/
}

.productImage img {
    display: inline-block;
    margin:0;
    padding:0;
    /*float:right;*/
    /*background-color:blue;*/
}

.productImageInfo {
    display: block;
    margin:0;
    padding:0;
    padding-left: 8px;
    margin-right: 8px;
    background-color: blue;
    width: auto;
}

.reviewsContent {
    clear:both;
    display: block;
    margin:0;
    padding:0;
    margin-left: 25px;
    background-color: purple;
}
4

1 に答える 1

1

私が見たところ、これにはこれまでのところ2つの問題があります。

まず、と タグのproductImage両方にクラスを適用しました。これが、国境が 2 つある理由です。はクラスから1 つを取得し、 は別のクラスを取得します。divimgdivimgproductImage

div が互いにクリアされていないように見える理由は、それらが DOM 内のどこにあるかが原因です。

レビュー div は実際にはproductImagediv をクリアしていますが、画像と情報を含めるのに十分な大きさではない高さを明示的に指定しました。情報はproductImagedivの中にあるので、レビューをレイアウトする際に考慮されていないため、クリアされていないと思います。

クラスの高さproductImageを 380px に増やし、クラスをproductImagedivから外せば、まさに望みどおりになると思います。

画像の背景が白で、ページの背景が灰色であるため、画像が置かれている場所にまだ少し視覚的な中断があることに注意してください。ただし、境界線はなくなりました。

于 2013-04-01T20:03:17.713 に答える