0

我将图像放置在左侧，两个在右侧。当我调整浏览器窗口的大小时，图像会缩放。

我遇到的问题是，在 Safari 和 Firefox 中，图像会正确缩放并保持位置，但在 Chrome 中，当我调整浏览器大小时，图像位置会发生变化。

这是一个显示问题的 jsfiddle 示例：

http://jsfiddle.net/sSZFA/6/

以及代码的副本：

        #col1{
           width:50%;
           float:left; 
        }

        #col2{
           width:50%;
           float:left; 
        }

        #img1{
           width:50%;
           float:right;
           clear:both;
        }

        #img2{
           width:50%;
           float:right;
           clear:both;
        }

        #img3{
           width:50%;
        }
    ​

            <div id="col1">
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
    </div>
    <div id="col2">
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
</div>

​ ​</p>

4

2 回答 2

0

只需将图像 3 的宽度从 50% 更改为 49% ....

#img3 {
width:49%;
}


这里的工作示例

于 2012-11-09T10:00:57.687 回答
0

将图像宽度更改为 49% 会产生一些难看的差距，但我终于找到了解决方案。

似乎是“clear:both”css 让 chrome 发疯了，所以我重新排序了元素并删除了对 clear 属性的需求，现在它可以工作了。

如果有人可以提供我的原始代码在 chrome 中不起作用的原因，我很想知道。

http://jsfiddle.net/AC5BJ/1/

#col1{
   width:50%;
    float:left; 
}

#col2{
   width:50%;
    float:left; 
}

#img1{
    width:50%;
    float:right;
    /*clear:both;*/
}

#img2{
    width:50%;
    float:right;
    /*clear:both;*/
}

#img3{
    width:50%;
    float:left;
}

    <div id="col1">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">  
    </div>
    <div id="col2">
        <img id="img3" src="http://upload.wikimedia.org/wikipedia/commons/e/e9/Official_portrait_of_Barack_Obama.jpg"/>
        <img id="img1" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
        <img id="img2" src="http://fueledbyramen.com/fun/site/mpufun.jpg">
</div>
于 2012-11-09T10:47:22.070 回答