none
aspnet排版问题 RRS feed

  • 问题

  •     aspnet界面中有一个table1,然后我往这个table1中添加了table_a1、table_a2,想达到图1的效果,但是做出来是图2的效果!

        我错在哪里了(见代码1)?或者有没有更好的办法排版呢?(我现在是用table中再嵌套table的方法)


    --------------------------图1---------------------


    --------------------------图2---------------------



    --------------------------代码--------------------

    <%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="MonthRent.aspx.cs" Inherits="OftenTable_MonthRent" %>
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <script language="javascript" type="text/javascript" src="C:\Documents and Settings\Administrator\My Documents\Visual Studio 2008\Addins\My97DatePicker/WdatePicker.js"></script>
    <style type="text/css">
    .table1:{width:1024px; height:500px; vertical-align:top; font-size:x-small;}
    .table_a1:{width:220px; height:200px; vertical-align:top; background-color:Red;}
    .table_a2:{width:1024px;  height:100%;  vertical-align:top; background-color:Blue;}
    .td1-1:{height:200px; width:220px; vertical-align:top;}
    .td1-2:{height:1200px;vertical-align:top; }
    .td2-1:{height:800px; width:220px; vertical-align :top; }
    </style>
    
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    </asp:Content>
    <asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     
        <table cellspacing="1" class="table1">
            <tr>
                <td>
                    <table cellspacing="1" class="table_a1" >
                        <tr>
                            <td>
                                &nbsp;</td>
                        </tr>
                        <tr>
                            <td>
                                111</td>
                        </tr>
                    </table>
                </td>
                <td>
                    <table cellspacing="1" class="table_a2">
                        <tr>
                            <td>
                                222&nbsp;</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
        
    
        
        
        
    
        
    </asp:Content>


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!

    2013年8月6日 8:14

答案

  • 給我的感覺其實你想達到 2 columns 的效果。

    我個人是建議不要用Table,而考慮使用CSS。

    <html>
    
    <head>
    <style>
    
    .wrapper
    {
    }
    
    .left
    {
    	background-color:Red;
    	float:left;
    	width:220px;
    	height:200px;
    	overflow: auto
    
    }
    
    .right
    {
    	background-color:Blue;
    	float:right:
    	width:1024px;
    	height:100%; 
    	overflow: auto
    }
    </style>
    </head>
    
    <body>
    <div class="wrapper">
    
    	<div class="left">
    		left
    	</div>
    
    	<div class="right">
    		right
    	</div>
    
    </div>
    
    
    </body>
    
    </html>

    可以直接點看到實際的執行效果(http://plnkr.co/edit/cgd4rJKmgls0WlxRs7dB?p=preview)

    使用了css的float。

    希望有幫助


    2013年8月6日 15:05
  • 針對你 Table 排版的問題

    Table 中的 TD 如果被撐高了,將預設垂直置中

    所以你必須在 TD 上加入 valign 屬性填入 top 值讓他靠上對齊,如下

    <tr>
        <td valign="top">
           <table cellspacing="1" class="table_a1" >
           ..........
    加入後就能夠靠上對齊了,但是還是建議以 Div 與 Css 進行排版。

    Blog: http://www.dotblogs.com.tw/joysdw12/

    2013年8月7日 1:20

全部回复

  • 給我的感覺其實你想達到 2 columns 的效果。

    我個人是建議不要用Table,而考慮使用CSS。

    <html>
    
    <head>
    <style>
    
    .wrapper
    {
    }
    
    .left
    {
    	background-color:Red;
    	float:left;
    	width:220px;
    	height:200px;
    	overflow: auto
    
    }
    
    .right
    {
    	background-color:Blue;
    	float:right:
    	width:1024px;
    	height:100%; 
    	overflow: auto
    }
    </style>
    </head>
    
    <body>
    <div class="wrapper">
    
    	<div class="left">
    		left
    	</div>
    
    	<div class="right">
    		right
    	</div>
    
    </div>
    
    
    </body>
    
    </html>

    可以直接點看到實際的執行效果(http://plnkr.co/edit/cgd4rJKmgls0WlxRs7dB?p=preview)

    使用了css的float。

    希望有幫助


    2013年8月6日 15:05
  • 針對你 Table 排版的問題

    Table 中的 TD 如果被撐高了,將預設垂直置中

    所以你必須在 TD 上加入 valign 屬性填入 top 值讓他靠上對齊,如下

    <tr>
        <td valign="top">
           <table cellspacing="1" class="table_a1" >
           ..........
    加入後就能夠靠上對齊了,但是還是建議以 Div 與 Css 進行排版。

    Blog: http://www.dotblogs.com.tw/joysdw12/

    2013年8月7日 1:20
  •     非常感谢!但我想多问一个问题!

        我想实现这种样式:

    1.给.wrapper添加滚动条,可以把GridView的内容(很宽)用滚动条查看。(现在需要滚动到最下面才能看到左右滚动的条,如图1

    2.保证.left的宽度等于控件Calendar的宽度。

    3..Right的宽度等于控件GridView的宽度(我放了一个GridView,而这个GridView的宽度根据SqlDatasource来,宽度可能会变化)

        总之一句话,使用.wrapper的滚动条来看GridView的全部内容。(GridView完整的显示,不要象图1中那样,先要把右边的滚动条拖到最下面,才能看见底部的滚动条并拖动)

        我现在只能规定了GridView的宽度的条件下弄出我需要的效果,如果GridView是可变的,效果就不行,该如何做啊?

    -----------------------------------图1------------------------------


    C# 菜鸟中的雏鸟!提的问题也许很幼稚,但我是认真的。希望看在党国的面子上拉兄弟一把!



    2013年8月12日 3:17