Question

我目前有以下HTML结构：

 <div id="image" style="margin: 20px;">
        <h5>
          <span>DriverName1</span>
          <span>DriverName2</span>
        </h5>
        <img src=/>
        <img src= />
    </div>

我试图使图像并排显示，但是drivername1和drivername2的标题在同一图像上彼此相邻。如何使这些跨度与每个图像的左上边缘匹配？我尝试在每个图像上添加单独的标题，但这使得图像在另一个图像上方垂直排列。

Answer 1

您可以考虑使用display：flex for this

检查以下代码段

div{
  display:flex;
 }
.image {
  display: flex;
  flex-direction: column;
  border:1px solid;
  margin-left:10px;
}
img {
  width: 100px;
  height: 100px;
}

<div id="image" style="margin: 20px;">
  <section class="image">
    <header>DriverName1</header>
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
  </section>
  <section class="image">
    <header>DriverName2</header>
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
  </section>
</div>

非灵活解决方案

div * {
  display: inline-block;
}
.image {
  border: 1px solid;
  margin-left: 10px;
}
img {
  width: 100px;
  height: 100px;
  display: table-cell;
}
header {}

<div id="image" style="margin: 20px;">
  <section class="image">
    <header>DriverName1</header>
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
  </section>
  <section class="image">
    <header>DriverName2</header>
    <img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
  </section>
</div>

希望这有帮助

2个标题并排排列2个图像

1 个答案: