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

试试这个Fiddle

关键是使用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
}