none
div布局真麻烦 RRS feed

  • 问题

  •  

    在一个应用了母版页的页面放入了用户控件     母版页用了div+css布局   用户控件里面的控件应该如何布局?

     

     

    对于每一个控件  如  textbox   botton 等 用table还好弄 把它们都弄到单元格里面去  如果用div+css布局  应该怎么弄?      

    2008年9月13日 0:22

答案

  • 你的问题太笼统了。

    总的原则:每个独立的单元,如用户控件、 服务器控件等先独立布局好,在放进外面的框架布局里面,一般来说,模板页起框架的作用,不要进行交叉。

    不过,DIV布局确实需要一点技术和技巧的,必须很熟悉html和 CSS才可以

    2008年9月13日 1:55
    版主
  • 当年从table排版转到div排版时确实痛苦异常。不过现在看来很是值得的,table排版时代的colspan rowspan真的会把人折磨致死。

    div排版不是一两句就能讲得清楚的,主要目的就是内容(content)与表现(presentation)分离,就像与asp.net code behind有异曲同工之效。

    如果能肯英文书的话,《css mastery: advanced web standards solutions》非常值得推荐,好像也有中译本,不过觉得IT书的英文版比中译本强太多了。
    2008年9月15日 0:06
  •  wowdd1 写:

     

    在一个应用了母版页的页面放入了用户控件     母版页用了div+css布局   用户控件里面的控件应该如何布局?

     

     

    对于每一个控件  如  textbox   botton 等 用table还好弄 把它们都弄到单元格里面去  如果用div+css布局  应该怎么弄?      

     

    第一个问题,可以给你一个比较直观的方法,就是直接把 户控件 放到 母版页的页面 布局好了,再取出来。

     

    第二问题,给你一个我自己的写法

     

    Code Snippet

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
        <style type="text/css" >
            #DivForm { width:800px;}
            .col { width:100%; border-bottom:1px dotted #ccc}
            /* .col div {width:33.3%; float:left;}  for simple*/
            .col .col_L {width:30%; float:left;background-color:#ccc;}/* text-align:right; */
            .col .col_M {width:30%; float:left;background-color:#999;}
            .col .col_R {width:40%; float:left;background-color:#ccc;}
        </style>
    </head>
    <body>
        <div id="DivForm">
            <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div>
             <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div> <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div> <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div> <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div>
        </div>
    </body>
    </html>

     

     

     

    2008年9月15日 6:01
    版主

全部回复

  • 你的问题太笼统了。

    总的原则:每个独立的单元,如用户控件、 服务器控件等先独立布局好,在放进外面的框架布局里面,一般来说,模板页起框架的作用,不要进行交叉。

    不过,DIV布局确实需要一点技术和技巧的,必须很熟悉html和 CSS才可以

    2008年9月13日 1:55
    版主
  • 当年从table排版转到div排版时确实痛苦异常。不过现在看来很是值得的,table排版时代的colspan rowspan真的会把人折磨致死。

    div排版不是一两句就能讲得清楚的,主要目的就是内容(content)与表现(presentation)分离,就像与asp.net code behind有异曲同工之效。

    如果能肯英文书的话,《css mastery: advanced web standards solutions》非常值得推荐,好像也有中译本,不过觉得IT书的英文版比中译本强太多了。
    2008年9月15日 0:06
  •  wowdd1 写:

     

    在一个应用了母版页的页面放入了用户控件     母版页用了div+css布局   用户控件里面的控件应该如何布局?

     

     

    对于每一个控件  如  textbox   botton 等 用table还好弄 把它们都弄到单元格里面去  如果用div+css布局  应该怎么弄?      

     

    第一个问题,可以给你一个比较直观的方法,就是直接把 户控件 放到 母版页的页面 布局好了,再取出来。

     

    第二问题,给你一个我自己的写法

     

    Code Snippet

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Untitled Page</title>
        <style type="text/css" >
            #DivForm { width:800px;}
            .col { width:100%; border-bottom:1px dotted #ccc}
            /* .col div {width:33.3%; float:left;}  for simple*/
            .col .col_L {width:30%; float:left;background-color:#ccc;}/* text-align:right; */
            .col .col_M {width:30%; float:left;background-color:#999;}
            .col .col_R {width:40%; float:left;background-color:#ccc;}
        </style>
    </head>
    <body>
        <div id="DivForm">
            <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div>
             <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div> <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div> <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div> <div class="col">
                <div class="col_L">left
                </div>
                <div class="col_M">middle
                </div>
                <div class="col_R">right
                </div>
            </div>
        </div>
    </body>
    </html>

     

     

     

    2008年9月15日 6:01
    版主