HTML5 Горизонтальное размещение изображений

Question

Я довольно новичок в 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;
}

Спасибо за помощь.

Answer 1

Я понимаю, что вы хотите получить что-то вроде этого «снимка» (цветовые рамки на изображениях видны только «кусочкам»), заголовок светло-серый.

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

Есть несколько способов сделать это, первый:
(я добавил и 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:.

Answer 2

С вашей текущей разметкой добавьте этот CSS:

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

Кстати, вы можете в конечном итоге захотеть назначить класс этим изображениям и нацелить их на этот класс позже.