1

シナリオは次のとおりです。テーブルには、ラベルとコントロールの行と列があります。aspx.csには、「x」条件に基づいて言うことができるいくつかのシナリオがあり、ラベルとコントロールは非表示になっています。

例：これは単純なものを使用して行われます（例：4行>および。

 Label 1  Control1       Label 2  Control2       Label 3  Control3    

 Label 4  Control4       Label 5  Control5       Label 6  Control6    

 Label 7  Control7       Label 8  Control8       Label 9  Control9    

 Label 10 Control10      Label 11 Control1       Label 12 Control2

背後のコードがラベル8とコントロール8を非表示にすることを示している場合、これは現在のようになります。

 Label 1  Control1       Label 2  Control2       Label 3  Control3    

 Label 4  Control4       Label 5  Control5       Label 6  Control6    

 Label 7  Control7                               Label 9  Control9    

 Label 10 Control10      Label 11 Control1       Label 12 Control2

それはあまり良く見えません。ラベル＆コントロール11は、ラベル＆コントロール8があった位置に移動すると予想されます。私はこれを行うための迅速で汚い方法は次のようなことをすることだと思っていました：

<table>
   <tr>
       <td>
           <table>
               <tr>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
               </tr>
           </table>  
       <td>
       <td>
           <table>
               <tr>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
               </tr>
               <tr>
                  <td></td>
               </tr>
           </table>  
       </td>
     </tr>
   </table>

次に、その方法でコントロールの「tr」を非表示にし、行を上に移動します。しかし、もっと良い方法が必要だと思いますが、完全にはわかりません。アドバイスをいただければ幸いです。ありがとう！

4

2 に答える 2

0

レイアウト目的でのテーブルの使用は、ほとんどすべてDIVとCSSに置き換えられました。特に表形式のデータを出力する場合を除いて、レイアウトをテーブルに依存することは決して良い考えではありません。

あなたの説明では、すべてを左にシフトするのではなく、行をシャッフルしようとしているように聞こえます。あなたの例では、11が8のスポットを取ります。DIVとCSSを使用して、9を8に、10を9にラップし、11と12を左にシフトすることもできます。

この非常に醜いDIV/CSSの例jsFiddleまたは以下のコードを確認してください。ここでは5シフト、8シフト上に隠れています。

<div style="float:left;margin:10px">
    <div>
        1
    </div>
    <div>
        4
    </div>
    <div>
        7
    </div>
</div>
<div style="float:left;margin:10px">
    <div>
        2
    </div>
    <div style="display:none">
        5
    </div>
    <div>
        8
    </div>
</div>
<div style="float:left;margin:10px">
    <div>
        3
    </div>
    <div>
        6
    </div>
    <div>
        9
    </div>
</div>

</ p>

于 2012-11-18T03:00:56.727 に答える
0

テーブルセルは所定の位置にフロートしません-他の行のセルコンテンツに基づいて固定幅であるため、サーバーのレンダリング時に各セルにレンダリングされるものを変更しない限り、テーブルはこの機能を提供しません（つまり、コード要素をシフトします）。

列の数が固定されている場合は、float：leftスタイルの要素を使用できます。要素が伸びないようにするには、おそらく固定幅を使用してオーバーフローを非表示にする必要があります。

<style>
#GridContainer
{
    width: 600px;
    overflow: hidden            
}
.row {
    clear: both;
}
.row>div
{
    width: 80px;
    float: left;
    overflow-x: hidden;   
}
</style>

<div id="GridContainer">

 <div class="row">
    <div>item 1</div>
    <div>item2</div>
    <div>item3</div>
 </div>      

 <div class="row">
   <div>item 4</div>
   <div>item 5</div>
   <div>item 6</div>
   <div>item 7</div>       
  </div>  

 <div class="row">
   <div>item 8</div>
   <div>item 9</div>
   <div>item 10</div>
   <div>item 11</div>       
   <div>item 12</div>       
   <div>item 13</div>       
 </div>
</div>

ここでjsFiddleを試すことができます：http： //jsfiddle.net/6tYnN/3/

この設定を使用すると、要素を削除するだけで、自動的に「ギャップを埋める」ことができます。

于 2012-11-18T05:35:56.123 に答える