1

私は 2 つの div を持つ td を持つテーブルを持っています。その div の両方を一列に並べたいのですが、列が増えると 2 番目の div がラップされます。ただし、各列に固定幅を設定したくありません。

HTML td 構造:

<td class="tableHead"> 
  <div class="tableHeadTxt">Lorem Ipsum</div> 
  <div class="toggler togglerImgCollapse"> </div>  
</td>
4

4 に答える 4

2

ねえ今あなたはこのようにこれを行うことができます

あなたのcssでうまく使用white-space:nowrap;され、親divにこのプロパティを与えます

と子divはcssファイルで定義display:inline-block;します

Css

.tableHead{
border:solid 1px red;
    white-space:nowrap;
}



td.tableHead > div{
border:solid 1px green;
    display:inline-block;
}

HTML

<table>
    <tr>

<td class="tableHead">
  <div class="tableHeadTxt">Lorem Ipsum</div>
  <div class="toggler togglerImgCollapse">Lorem Ipsum </div>  
</td>
    </tr></table>

ライブデモhttp://jsfiddle.net/2965K/

于 2012-06-07T06:23:06.953 に答える
2

  1. div.tableHeadTxtwhite-space: nowrap;CSSを取得する必要があります。これにより、テキストが折り返さdivれなくなります。

  2. td.tableHead div.tableHeadTxt, td.tableHead div.togglerfloat: left;CSSを取得する必要があります。これにより、インラインでレンダリングされます。

  3. div他の 2 つに続いて、clear: both; height: 0; width: 100%;CSS がアタッチされた 3 つ目が必要です。これにより、tdインライン要素しかない場合でも、適切な高さが維持されます。

于 2012-06-07T06:17:18.567 に答える
0

私はこれらの行を使用しています：

<div style="background: transparent url("../Images/20_20.png") no-repeat center; height: 20px; width:80px; ">
        <span  style=" background: transparent url("../Images/ObjectType/10_10.png") no-repeat center; height: 20px; width:80px; height: 20px; width:20px; margin-left:40px; ">  &nbsp;</span>
</div>

それがあなたを助けることができることを願っています。

于 2013-02-01T06:06:04.360 に答える
0

div で float を使用する

<table>
    <tr>
        <td class="tableHead">
            <div class="tableHeadTxt" style="float:left">Lorem Ipsum</div>
            <div class="toggler togglerImgCollapse" style="float:left">pbaris</div>  
        </td>       
    </tr>
</table>

http://jsfiddle.net/gkzdG/

于 2012-06-07T06:25:52.160 に答える