0

したがって、基本的に私が達成したい効果は次のようなものです。

          Wrapped Text Wrapped
 Text     Text Wrapped Text
          Wrapped Text

それらが 2 つの別個の tds にあるかのように、この場合、コードは次のようになります。

<table>
<tr>
<td>Text</td>
<td style="width: 150px;">Wrapped Text Wrapped Text Wrapped Text Wrapped Text</td>
</tr>
</table>

しかし、私はこの効果をテーブルなしで実現したいと考えていますが、HTML と CSS を使用しています。これはどのように可能ですか？

4

1 に答える 1

4

テキストブロックをdivに入れて、フロートさせます。

HTML：

 <div id="div1">
    Text
 </div>


 <div id="div2">
       Text Wrapped Text
      Wrapped Text
         Wrapped Text Wrapped
 </div>

CSS

 #div1, #div2{float:left;width:100px}

ここで実際の動作を確認してください：http：//jsfiddle.net/GyMbS/

...しかし、Amberlampsが指摘しているように、これではどちらかのセルを垂直方向に中央に配置するという課題が残ります。その解決策はトリッキーであり、テキストの要件によって異なります-常に1行になりますか？セルの高さは固定されますか？さまざまなコンテキストでのソリューションについては、CSSを使用した垂直方向のセンタリングを参照してください。

更新-代替
またはdivで使用できますdisplay:table-cell。これにより、左セルの垂直方向の整列がはるかに簡単になります。

#div1, #div2{display:table-cell;vertical-align:middle;width:100px;}​

ここでの作業を参照してください：http：//jsfiddle.net/GyMbS/1/

主な警告：IE8 +または非IEブラウザが必要です（http://caniuse.com/#feat=css-tableを参照） 。

于 2012-08-10T08:51:37.693 に答える