我有一个尝试在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
}