HTML5 Horizontale de l'Image de Placement

Je suis assez nouveau à l'HTML5, donc ce sera peut-être sembler une simple question, bien que je n'ai pas trouvé d'informations sur ce en ligne. Il semble que la plupart des cas où les gens veulent faire, ils utilisent un tableau (mais je comprends que c'est pas une bonne idée plus)

Dans ma zone d'en-tête j'ai besoin de placer plusieurs images côte à côte. Ils doivent être justifiés tellement il y a de l'espace entre les images et chaque image est à la bonne place. J'ai une taille appropriée bloc d'en-tête en place, mais pour la vie de moi ne peut pas comprendre comment organiser les images à l'intérieur correctement.

Les images doivent être placés comme ceci:
(http://imageshack.us/photo/my-images/339/tmpyg.jpg/)

mise en page

J'ai essayé ceci:

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

Mais je ne suis pas sûr de ce qui doit aller dans le css de la région, je suppose que

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

Merci pour l'aide.

InformationsquelleAutor bashirs | 2011-05-10
  1. 3


    Je comprends que ce que vous voulez obtenir son quelque chose comme cet "instantané" (la couleur des bordures sur les images sont seulement pour voir les "morceaux" plus facile), le en-tête est en gris clair.

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

    Il y a plusieurs façons de le faire, d'abord un:

    (J'ai ajouté et l'ID de l'en-tête (en option)).

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

    Le 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 */
}

    Espère que c'est ce dont vous avez besoin.

    Ce qui concerne.

    P:.

    • Je vous remercie beaucoup. Cela a fonctionné parfaitement.
    InformationsquelleAutor Putuko
  2. 3

    Avec votre marquage en cours, ajouter ce CSS:

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

    Btw, vous pourriez vous retrouver vouloir donner une classe à ces images et de les cibler avec la classe à un moment plus tard.

    • C'est aussi une réponse parfaite. Je vais revalorisation une fois que j'aurai assez de réputation (je suis encore trop faible). Merci beaucoup.
    InformationsquelleAutor Todd