更新的CSS代码

Question

我对stackoverflow进行了快速搜索，并找到了一些方法来解决它但没有工作。我有我的HTML代码，如下所示：

<div id="product_box">
    <div id="pro_img"><img src="images.jpg'" width="140px"/></div>
    <div id="pro_text">

    </div>
</div>

和我的CSS：

<style>
    #product_box {
    border: 1px solid;
    border-color: #8dd5f6;
    margin-top: 8px;
    margin-left: 4px;
    margin-right: 4px;
    width: 330px;
    height: 196px;
    float:left;
    }

    #pro_text{
    float:left;
    width:189px; 
    height: 196px;     
    background-color: #CCC;
    }

    #pro_img {
    float:left;
    border-right:1px solid #8dd5f6;
    width:140px;
    height: 196px;  
    }
</style>

#pro_img位于左侧，#pro_text位于右侧，在默认缩放和大放大时工作正常，但问题是当我缩小pro_text（右侧div）时离开容器盒。我发现有人说我的CSS里面需要box-sizing: border-box;。我试了一下，然后就这样说了：

<style>
    #pro_img {
    float:left;
    border-right:1px solid #8dd5f6;
    box-sizing: border-box;
    width:140px;
    height: 196px;  
    }
</style>

它不会再脱落，但边界是不可见的，因为它从内部边界图像。

我从border-right停用了#pro_img，问题已经消失，但我想要一个border-right来分隔图片和文字。

所需的总width：140(img)+1(border)+189(text) = 330px只适合容器盒。我尝试将框宽增加到332px，但它无济于事。

谢谢。

Answer 1

那是因为你正在使用float：left我清除了使用过的margin而不是看到http://jsfiddle.net/3pmmjLx8/

更新的CSS代码

#pro_text{
margin-left:141px;
width:189px; 
height: 196px;     
background-color: #CCC;
}

Div仅在缩小时移动

1 个答案:

更新的CSS代码