none
aspnet排版问题 RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

        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
    |

答案

  • Question
    登录进行投票
    1
    登录进行投票

    給我的感覺其實你想達到 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
    |
  • Question
    登录进行投票
    1
    登录进行投票

    針對你 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
    |

全部回复

  • Question
    登录进行投票
    1
    登录进行投票

    給我的感覺其實你想達到 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
    |
  • Question
    登录进行投票
    1
    登录进行投票

    針對你 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
    |
  • Question
    登录进行投票
    0
    登录进行投票

        非常感谢！但我想多问一个问题！

        我想实现这种样式：

    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
    |