0

列の左側に 1 つの要素を配置し、右側に 3 つの要素をまとめて配置したいと考えています。

つまり、次のようになります。

|item1                   item2 item3 item4|

（元の問題では、列はいくつかの列の上部にあるスパンです）

これは機能します：

table {
    width:10cm;
}
.push-left{
    display:inline-block;
    float:left;
}
.push-right{
    display:inline-block;
    float:right;
    padding:0 5px 0 5px;
}

<table>
<tr>
<td>
<div class="push-left">item1</div>
<div class="push-right">item4</div>
<div class="push-right">item3</div>
<div class="push-right">item2</div>
</td>
</tr>
</table>

float:right アイテムは、html 内で逆の順序で配置する必要があることに注意してください。

より良い方法はありますか？

4

2 に答える 2

2

item2 - item3 - item4 をラッパーに入れ、ラッパーをフロートします。

.inline{
  display:inline-block;
  padding:0 5px 0 5px;
}
.push-right{
    float:right;
}


<div class="push-right">
  <div class="inline">item2</div>
  <div class="inline">item3</div>
  <div class="inline">item4</div>
</div>

そして、要素をフロートにするときはいつでも、そのコンテンツにラップされdisplay: inline-blockます。必要ありません。

于 2012-05-22T10:40:05.893 に答える
0

最初の項目を表の別のセルに入れ、他の 3 つの項目を別のセルに入れます。2 番目のセルを右揃えにします。

実際のテーブルにコードに表示されているよりも多くの行がある場合は、新しいセルやcolspan属性を追加して、テーブル構造を変更する必要がある場合があります。

于 2012-05-22T10:59:09.567 に答える