Question

我想在顶部横幅中放置两张图片。但第二张图片显示在“横幅”父div之外。我也尝试过表，但没有得到结果。当我调整浏览器大小时，两个图像也不应该折叠。这样做的正确方法是什么？一种方法是在Photoshop中加入我不想做的图像。

<div id="banner">
    <div><img src=".." alt="Utilities Logo" 
    height="105" width="406" /></div>
    <div>
    <img src=".." alt="!" 
    height="105" width="467">
    </div>
    </div>

Answer 1

这似乎是最简单的方法。图像是内联块，因此它们会很好地对齐（#banner不应小于406 + 467）。

<div id="banner">
    <img src=".." alt="Utilities Logo" height="105" width="406" /><img src=".." alt="!"  height="105" width="467">
</div>

另一种方法可能是使用float CSS属性，就像michele建议的那样。

如果你真的不希望它们在浏览器调整大小时折叠，你应该考虑在PS中合并它们，因为那时我并没有真正看到它们分开的充分理由。或者你可以给#banner一个足够大的CSS min-width来保存这两个图像。

Answer 2

只需在div中添加一些ID即

   <div id="banner">
        <div id="img1">
            <img src=".." alt="Utilities Logo" height="105" width="406" />
        </div id="img2">
        <div>
            <img src=".." alt="!" height="105" width="467">
        </div>
    </div>

然后尝试以下css

#img1 
{
    float : left;
    width : 406px;
}

#img2 
{
    float : left;
    width : 467px;
}

那应该解决问题

Answer 3

我会做这样的事情：

<div id="banner">
    <div id="image_1">
    </div>
    <div id="image_2">
    </div>
</div>

#image_1 { height:105px; width:406px; float:left; background:url(file_path_to_image/name_of_image.png) no-repeat; }

#image_2 { height:105px; width:467px; float:left; background:url(file_path_to_image/name_of_image.png) no-repeat; }

另外，我会确保#banner <div>的宽度至少为467像素。

如果您希望这两个<divs>在彼此之上，那么您并不具体。如果您不希望它们从左到右水平对齐，就像我们上面的代码一样。只需取出float:left;，只需确保#banner div and上的最小宽度为467像素即可。

Answer 4

简单：

<style type="text/css">
    #banner { white-space: nowrap; }
</style>

<div id="banner">
    <img src="banner-1.png" width="406" height="105">
    <img src="banner-2.png" width="467" height="105">
</div>

子div延伸出父div

4 个答案: