HTML / CSS结构用于图像旁边的垂直居中文本，一些元素留下，一些元素正确

Question

我有一个布局结构，我正在尝试用HTML / CSS构建。 从本质上讲，它是跨网页运行的顶级栏。 在左边，我想要一个方形图像，然后是两个或多个与图像垂直对齐的链接。 在右边，我想要另外两张图像的高度与左边的图像相同。 基本上，布局应如下所示：

我在这方面取得了一些进展。 例如，我已经将链接文本与左手图像垂直居中对齐，例如：

  <div style="display:table;">
    <span style="display:table-row">
      <img src="icon.png" style="display:table-cell; vertical-align:middle;"></img>
      <span style="display:table-cell; vertical-align:middle;">LINK1</span>
    </span>
  </div>

我发现在尝试将其他图像添加到右侧时，事情开始变得混乱。 例如，我在更多的<span>元素中添加右侧图像，其中display:table-cell作为样式，但最重要的是将表格宽度拉伸到100％，将单元格对齐，将单元格大小调整为适合他们的内容等。 我基本上想知道我是否会试图用表格表达这种结构的错误（或过于冗长）的路径。

我基本上寻找HTML结构元素和CSS样式的优雅组合，可以实现上图中显示的布局。

Answer 1

试试这个小提琴

关键是使用float

HTML

<div class="main">
  <div class="image">Image1</div>
  <div class="image">Image2</div>
  <div class="link">Link1</div>
  <div class="link">Link2</div>
  <div class="image" style="float:right">Image1</div>
  <div class="image" style="float:right">Image2</div>
</div>

CSS

.main{
width:800px;
height:500px;
border:1px solid black;
margin-top:20px;
margin-left:20px
}

.image{
  width:13%;
  height:10%;
  border:1px solid red;
  float:left
}

.link{
  width:13%;
  height:10%;
  border:1px solid blue;
  float:left
}