Question

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

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

第二个问题是紫色div（底部有2个），我没有在这张照片中包含但它基本上是这个类的div：

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

这个div（紫色）不应该与蓝色div重叠，因为它是一个块，但确实如此..

谢谢！

larger picture here

这是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;
}

Answer 1

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

首先，您已将productImage类应用于div和img标记。这就是你有两个边框的原因。 div获得一个而img获得productImage类的另一个。

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

审核div实际上已清除productImage div，但您明确指出它的高度不足以包含您的图片和信息。由于信息在productImage div内部，因此不会被清除，因为我认为在评估布局时不会考虑它。

如果您将productImage课程的高度增加到380px并且将productImage课程从div中取出，then I think you get exactly what you want.

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

div元素在指定时不像块一样

1 个答案: