0

好的，我的对齐有两个问题。

首先，正在创建 div 左侧的 2 个边框，但我不明白为什么会这样。我只希望创建一个边框。宽度是 1px，所以它不应该这样吗？

第二个问题是紫色的 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

据我所知，到目前为止，这有两个问题：

首先，您已将productImage类应用于 thediv和img标签。这就是为什么你有两个边界。div得到一个，得到img另一个从productImage班上。

div 似乎没有相互清除的原因是因为它们在 DOM 中的位置。

审查 div 实际上正在清除productImagediv，但是您明确地给它一个高度，它不足以容纳您的图像和信息。由于信息在productImagediv 内，因此不会被清除，因为我认为在布置评论时不会考虑它。

如果你将类的高度productImage增加到 380px，然后将productImage类从 div 中取出，那么我认为你得到了你想要的。

请记住，图像所在的位置仍然存在一些视觉中断，因为图像的背景是白色的，页面的背景是灰色的，但是边框消失了。

于 2013-04-01T20:03:17.713 回答