html - 在没有溢出或截断的情况下，将图片排列在 html 表格中 2 行文本左侧的正确方法是什么？

Question

我有一个网页，并且在一个 html 表格单元格中有数据(准确地说是一个 google orgChart api 表格单元格)。我想在左边显示一个图像，然后在它的右边显示 2 行文本。该图像与 2 个文本行的高度相同，但似乎没有对齐。

如果我选择有图片

float:left

正确对齐所有内容，但随后文本溢出超出外部单元格的水平宽度。我现在正在尝试同时使用 float:left 来获得正确的对齐方式，但也让外部 td 扩展以支持图像和文本的整个宽度(请参见下面的代码)

作为更糟糕的情况，我可以将它放在它自己的表格中，其中图像位于 rowSpan = 2 的 td 中，但我试图提出一个非表格解决方案(假设其他布局已经是表格所以想要避免嵌套表，因为嵌套表总是存在性能问题等。

这是我的代码:

 <div class="teamBlock">
    <br><img width="35" src="myimage.png" class="headImage">
    <span class="boldText">My team</span><br/>
    My Level
 </div>

这是CSS:

.boldText {
    font-weight: bold;
 }

 .headImage 
 {
  text-align: left;
 }

 .teamBlock 
 {
    display: block;
    text-align: left;
 }

Answer 1

您可以通过将图像和文本行放在 div 中来实现此目的。例如:

HTML:

<div id="container">
    <div id="pic">
        <img>
    </div>
    <div id="row1"></div>
    <div id="row2"></div>
</div>

CSS:

#pic, #row1, #row2 {
    float: left;
}

#container {
    width: 200px; /* width of #pic + #row1/row2 */
}

#pic {
    height: 100px;
    width: 100px;
}

#row1, #row2 {
    width: 100px;
    height: 50px;
}

JS Fiddle Example