0

我有一个网页，并且我在 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;
 }
4

3 回答 3

0

您可以通过将图像和文本行放在 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 小提琴示例

于 2013-10-02T15:03:28.320 回答
0

这是你想要的吗？？？
小提琴

<div class="main">   
    <img src="http://placehold.it/200x200" />
</div>
于 2013-10-02T15:08:57.843 回答
0

您可以使用 div 并使用边距等设置样式。得到你想要的确切布局。一个基本的例子是：

<div style="width:400px; height:200px;">
<img src="../Images/icon-left-panel-compage.png" width="200px" height="200px" style="float:left" />
<div style="width:200px; overflow:auto;">hello my name is brian johnson</div>
<div style="width:200px; overflow:auto;">helloe my name is john brianson</div>
</div>

然后将您想要的任何上边距应用于第二个 div

于 2013-10-02T15:05:56.233 回答