html - Div 仅在缩小时 move

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>

它不会再掉下来，但边框是不可见的，因为它从内部包围了图像。

我从 #pro_img 中禁用了 border-right，问题解决了，但我想要一个 border-right 来分隔图像和正文。

总宽度需要:140(img)+1(border)+189(text) = 330px刚好适合容器框。我尝试将框宽度增加到 332px，但没有用。

谢谢。

Answer 1

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

更新的 CSS 代码

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