2

テーブルセル内にいくつかのアイコンを配置しようとしています<td>が、結果は画面の右上(テーブルセルの外側)に配置されます。

私のコードの短いバージョンは次のようなものです:

<td class="td_name">
  <div class="actions">
    <div class="floatLeft iconset_16px update_sprite_bw_16px" title="Update"></div>
    <div class="floatLeft iconset_16px settings_sprite_bw_16px" title="Settings"></div>
    <div class="floatLeft iconset_16px delete_sprite_bw_16px" title="delete"></div>
  </div>
  <div class="gal_name">
    Some name
  </div>
</td>

positiontd_nameはrelativeにaction設定され、absoluteに設定されます。これは機能するはずですが、今回は機能しません。

ここで何が欠けていますか？jsFidle の完全なコード例を参照してください。

ノート

の中actionにDIVを配置しようとしています。 jsFiddleが jsFiddle の HTML ウィンドウの右上隅に div を表示する場合、例も機能していません。<td class="td_name">
iconset_16px

#sim_gallery .defaultList tr td.name {  position: relative; width: 200px; height: 100px; }
#sim_gallery .defaultList tr td .actions { position: absolute; top: 0px; right: 0px; margin: 5px;}

注 2
これは、テーブルの使用法に慣れていないすべての人向けです。

90 年代初頭、ページ レイアウトにテーブルを使用するのは非常に一般的で、非常に簡単でした。しかし、設計者はすぐに、レイアウトの変更が a** にとって苦痛であることに気付きました。テーブルの使用には、さらにいくつかの欠点があります。

そうです、テーブルを使用しなくても何でも設計できます。

では、いつテーブルを使用しますか? テーブルは通常、表形式のデータを表示するために使用されます。Web 用の Excel シートのようなものです。私の経験では、リスト要素や div よりもテーブル データを構造化する方がはるかに簡単です。そのため、場合によっては、これがウェブサイトに悪影響を及ぼさないことを知ってテーブルを使用します。

したがって、表を使用することがどれほど悪いことかについての議論を始めないでください。私の問題を解決するためにあなたのエネルギーを使ってください:)

4

3 に答える 3

3

さらにテストした結果、表のセルを配置できないようです。どのような意味がありますか。しかし、私は表のセル自体を配置しようとしていたのではなく、セル内のコンテンツを配置しようとしていました。

Web でさらに調査を行った後 (そして、ここで無駄な議論を行った後)、この記事を見つけました。これは基本的に私に短い答えを与えます:いいえ、それは不可能です。

彼らの例では、jQuery を使用しています。しかし、私はまだ CSS を使用してこれを行いたいので、別の解決策を考え出しました。

テーブル セルの DIV 内にコンテンツをラップし、この DIV がテーブル セルと同じ大きさであることを確認します。出来上がり、すべてが良いです:)

.wrapper { width: 200px; height: 100px; line-height: 100px; position: relative; border: solid 1px #666; }
.actions { position: absolute; top: 0px; right: 0px; }
.iconset_16px { height: 16px; width: 16px; background-color: #87ceeb; margin: 3px;}
.floatLeft  { float:left!important; }

<table>
<tr>
<td>
 <div class="wrapper">
 <div class="actions">
   <div title="Update" class="floatLeft iconset_16px"></div>
   <div title="Settings" class="floatLeft iconset_16px"></div>
   <div title="delete" class="floatLeft iconset_16px"></div>
 </div>

 <div class="gal_name">
   <a title=" Adventure" href="#"> Adventure</a>
 </div>
 <div>   
</td>
</tr>
</table>
于 2012-04-15T17:39:49.327 に答える
0

何をしようとしているのか完全にはわかりませんが、設定position: relativeして<td>から、必要に応じてアイコンの位置を調整してみましたか？

http://jsfiddle.net/Z3kpr/1/

于 2012-04-15T16:35:36.190 に答える
0

下のdiv要素はフラグactionsとともに左に浮かんでいる!importantため（この理由から悪い考えです）、親の位置を無視しています。

フロートを取り外すと、適切に配置されます。

違いがわかるように、そのうちの 1つを修正した更新済みのフィドルを次に示します。http://jsfiddle.net/u9p4u/1/

于 2012-04-15T16:35:53.070 に答える