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;}

调整浏览器窗口大小时图像会一起冲突

2 个答案: