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

使用您当前的标记，添加此CSS：

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

顺便说一句，你可能最终想要给这些图像上课，并在以后的课程中将它们作为目标。

Answer 2

我明白你想要实现的东西就像这个“快照”（图像上的颜色边框只是看到“碎片”更容易），标题是浅灰色。

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

希望这是你需要的。
问候。
Y：

HTML5水平图像放置

2 个答案: