图像旁边垂直居中文本的 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 的元素作为样式，但最重要的是将表格宽度拉伸(stretch)到 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
}