我有一个尝试在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样式的完美组合,以实现上图所示的布局。

最佳答案

试试这个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
}

10-08 00:53
查看更多