在HTML中布局图像

Question

对于HTML / CSS，我是超级糟糕/新手，所以这可能非常容易。你如何布局这样的四个图像？ -

我现在正在使用四个div标签（或者我会说尝试吗？）。

 div.imageBlockA {
     float: top;
     float: left;
 }
 div.imageBlockB {
     float: top;
     float: right;
 }
 div.imageBlockC {
     float: bottom;
     float: left;
 }
 div.imageBlockD {
     float: bottom;
     float: right;
 }

谢谢！

Answer 1

如果没有看到您的布局，请尝试以下操作：

.image {
  width: 50%;
  float: left;
  box-sizing: border-box;
  padding: 10px;
  }
.image img {
  max-width: 100%;
  border: 2px solid red;
  display: block;
  margin: 0 auto;
  }

<div class="image">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>

你需要添加更多样式以使其看起来像你想要的那样，但是有一种方法可以实现你所描述的基本布局。

正如下面评论中正确指出的那样，尝试添加box-sizing: border-box，这样您就可以安全地向外部div元素添加填充/边框，而不必担心它将添加的额外宽度/高度（可能通过制作来破坏布局下一个图像转到下一行，因为宽度将超过50％）。

编辑 - 忘了提及正如@Paulie_D在您的问题评论中指出的那样，top属性没有bottom或float值。

Answer 2

table {
  width: 100%;
}
td {
  text-align: center;
}
.image {
  background-color: lightblue;
  width: 80%;
  height: 40px;
}

<table>
  <tr>
    <td>
      <p class="image">IMAGE</p>
    </td>
    <td>
      <p class="image">IMAGE</p>
    </td>
  </tr>
  <tr>
    <td>
      <p class="image">IMAGE</p>
    </td>
    <td>
      <p class="image">IMAGE</p>
    </td>
  </tr>
</table>

无论有些人说什么，我发现使用表格标签以及单独的表格行和字段可以减少在进行布局时必须完成的工作量。您可能不同意这种方法，但它通常很有用 - 尤其是在开始使用HTML和CSS时。

Answer 3

另一种方式是

body {
  
  text-align: center;
}
.image {
  display: inline-block;
    width: 49%;
  }

  <div class="image">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>
<div class="image">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQgnZ-1mZ2Q2jRN2OZ2HIMESBjOfC295h0cZ_Bzgk9c30HRUR59eg">
</div>

这使用text-align: center;，在某些情况下这更灵活。