1

场景如下：在表格中，有标签和控件的行和列。在 aspx.cs 中有一些场景，我们可以说基于“x”条件，标签和控件是隐藏的。

例如：这是使用简单的（例如 4 rows> 和 .

 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 回答