子div延伸出父div

Question

我想将两个图像放在一起的顶部横幅。 但第二张图片显示在“banner”父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属性的发挥，因为米歇尔建议。

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

Answer 2

只需添加一些的id到div的

<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>的宽度至少为467px。

如果您希望这两个<divs>位于彼此之上，您还没有具体说明。如果你不希望它们从左到右水平对齐，因为它们将与我的上面的代码一起。只需取出float:left;只需确保#banner div and上的最小宽度为467px即可。

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>