HTML5水平圖像位置

我是相當新的HTML5因此這也許看起來是一個簡單的問題，雖然我還沒有發現關於這個網上的信息。它看起來好像人們總是希望做到這一點，他們用一個表大多數情況下（但我明白，已不再是個好主意）HTML5水平圖像位置

在我的頭區域，我需要並排幾個圖像側放置。他們應該是合理的，所以圖像之間有空間，每個圖像都在正確的位置。我有一個適當大小的標題塊，但在我的生活中無法弄清楚如何正確地將圖像排列在其中。

的圖片應該奠定了這樣的：（http://imageshack.us/photo/my-images/339/tmpyg.jpg/）

我已經試過這樣：

<header> 
<img src="ICUWB.jpg" alt="ICUWB" height="100" width="250"/> 
<img src="Logo.jpg" alt="ICUWB" height="250" width="250"/>  
</header>

但我不知道需要在CSS區去我猜

header { 
    background: #3d3837; 
    margin: 0 auto; 
}

感謝您的幫助。

來源

2011-05-10 bashirs

我知道你是想實現其像這樣的「快照」是什麼（彩色邊框上的圖像只看到「碎片」更容易），該頭是淺灰色。

http://imageshack.us/photo/my-images/200/unled1ik.jpg/

有幾種方法可以做到這一點，第一個：
（I並將ID到報頭（可選））。

<header id="arriba"> 
    <img src="1.jpg" alt="1" /> 
    <img src="2.jpg" alt="2" /> 
    <img src="3.jpg" alt="3" /> 
</header>

的CSS：

header#arriba { 
    width:960px; 
    height:350px; 
    clear:both; 
    margin:auto; 
    text-align:center; 
    background-color:#ccc; 
} 

header#arriba img { 
    vertical-align:middle; 
    margin:0 2px 0 2px; /* YOU CAN ADJUST IMAGES SPACE WITH THIS MARGINS */ 
}

希望這是你所需要的。
此致敬禮。
P :.

來源

2011-05-11 11:24:17 Putuko

非常感謝。這工作完美。 – bashirs 2011-05-11 20:07:34

根據您當前的標記，添加這個CSS：

header img{ 
    float:left; 
    margin-right:5px; 
}

順便說一句，你可能會想給一類以這些圖像，並在稍後的時間類瞄準他們。

來源

2011-05-10 23:58:28 Todd

這也是一個完美的答案。一旦我獲得了足夠的聲望，我會升高（我仍然太低）。非常感謝。 – bashirs 2011-05-11 20:08:36

HTML5水平圖像位置

回答

相關問題