0

Web ページがあり、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 に答える