html - 调整浏览器窗口大小时图像碰撞在一起

Question

我的问题是，当我调整浏览器的大小时，我的图像会相互碰撞，而不是保持在自己指定的格式中。实际上，当我调整浏览器大小时，我希望我的图像随浏览器一起移动，但不会相互碰撞。这是代码，谢谢。

这是我的HTML...

<div id="header-images">

    <img src="images/title.png" id="header_title" class="animated bounceInLeft" alt="Title Header"></img>

    <img src="images/header_interface.png" id="interface" class="animated bounceInRight" alt="Poyan's Interface"></img>
</div>

这是我的CSS...

    #header_title {     
    width: 561px;   
    height: 248px;
    margin-top: 175px;
    left: 37.5%;
    margin-left: -280.5px;
    position: absolute;
    z-index: -1000;
    min-width: 100px;
}

    #interface {
    min-width: 100px;
    width: 338px;
    height: 315px;
    margin-top: 165px;
    left: 73%;
    margin-left: -169px;
    position: absolute;
    z-index: -1000;
} 

如果您需要更多，请告诉我。

Answer 1

使用这个 css 来修复图像宽度，使其保持距离而不发生碰撞：

#header-images img {
    Width: 45%;
}

这将使两个图像之间保持 10% 的距离

Answer 2

这是一个将它们换成两行的示例：

http://jsfiddle.net/6PQy5/3/

#header_title {
    width: 561px;
    height: 248px;
    margin-top: 175px;
    float: left;
}
#interface {
    min-width: 100px;
    width: 338px;
    height: 315px;
    margin-top: 165px;
    float: right;
}

这是他们在屏幕外滚动的示例：

http://jsfiddle.net/6PQy5/4/

#header_images {min-width: 920px;}