子div延伸出父div

-1

我想將兩個圖像放在一起的頂部橫幅。但第二張圖片顯示在「banner」父div之外。我也嘗試過使用表格，但沒有得到結果。當調整瀏覽器大小時，還應該摺疊兩張圖片。什麼是正確的方法來做到這一點？一種方法是在Photoshop中加入我不想做的圖像。子div延伸出父div

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

來源

2011-01-25 user5858

「我要兩張圖片放在一起」並肩指的一面呢？如果是的話嘗試將浮動屬性分配給包含圖像的divs – michele 2011-01-25 09:43:33

這似乎是最簡單的方法。圖像是內嵌塊，所以它們會很好地對齊（#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來保存這兩個圖像。

來源

2011-01-25 09:49:52 kapa

只需添加一些的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; 
}

這應該解決的問題

來源

2011-01-25 10:42:02

我認爲使窗口變小第二個圖像將被「摺疊」 – user5858 2011-01-27 05:34:55

摺疊到底是什麼意思？ – 2011-01-27 06:29:51

我會做這樣的事情：

<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即可。

來源

2011-01-25 22:47:22 LightningWrist

簡單：

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

來源

2011-01-25 23:45:49 drudge

子div延伸出父div

回答

相關問題