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% 的距离