在表格单元格内的两个图像之间放置一个 Div
Posted
技术标签:
【中文标题】在表格单元格内的两个图像之间放置一个 Div【英文标题】：Placing a Div between two Images inside a table cell 【发布时间】：2020-01-02 04:46:30 【问题描述】：我正在创建一个联赛表，我想在每个结果的左侧和右侧包含每个团队的徽标（示例如下）。
我一直在尝试使用 float:right 和 left，但它没有按预期工作。
html：
<table border=2>
<tr>
<th>Local Team</th>
<th>Result</th>
<th>Away Team</th>
</tr>
<tr>
<td>Team 1</td>
<td><img class="photoL" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" /><div class="result">0 - 0 </div><img class="photoR" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" /></td>
<td>Team 2</td>
</tr>
</table>
CSS：
.photoL
max-width: 66px;
height: 40px;
float: left;
margin: 0px 0px 5px 0px !important;
.photoR
max-width: 66px;
height: 40px;
float: right;
margin: 0px 0px 5px 0px !important;
.result
我正在寻找的结果是：[IMG1] 0 - 0 [IMG2] 都在 td 内的同一行中。
【问题讨论】：
【参考方案1】：这是一种方法。删除浮动，只需将“结果”DIV 替换为 SPAN 以使这些项目与图像内联。
.photoL
max-width: 66px;
height: 40px;
.photoR
max-width: 66px;
height: 40px;
.result
height: 40px;
line-height: 40px;
img
vertical-align: middle;
这里是html：
<table border=2>
<tr>
<th>Local Team</th>
<th>Result</th>
<th>Away Team</th>
</tr>
<tr>
<td>Team 1</td>
<td><img class="photoL" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" />
<span class="result">0 - 0 </span><img class="photoR" src="https://cdn0.iconfinder.com/data/icons/cup/154/football-shield-club-sport-512.png" /></td>
<td>Team 2</td>
</tr>
</table>
【讨论】：
这很接近，但它没有垂直居中，vertical-align 也不在那里工作...... 你没有要求它垂直居中。 完美！谢谢你:)【参考方案2】：您可以使用 Flex 之类的工具来实现此目的。 详细了解 flex here
您可以根据自己的喜好修改下面的代码。
<!DOCTYPE html>
<html>
<head>
<style>
table
width: 100%;
tr
display: flex;
background-color: DodgerBlue;
tr > th
background-color: #f1f1f1;
width: 33.33%;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
</style>
</head>
<body>
<h1>The flex-direction Property</h1>
<p>The "flex-direction: row-reverse;" stacks the flex items horizontally (but from right to left):</p>
<table>
<tr class="flex-container">
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</table>
</body>
</html>
希望这会有所帮助！
【讨论】：
以上是关于在表格单元格内的两个图像之间放置一个 Div的主要内容，如果未能解决你的问题，请参考以下文章
QTableWidget 能不能在一个单元格内加入多个控件？