固定宽度_tkinter 固定宽度 - CSDN
精华内容
参与话题
  • HTML5 布局-固定宽度

    千次阅读 2013-04-18 17:35:23
    首先我们这里探讨的是我们常用的固定宽度的居中布局,这应该是目前实战中应用的最多的了。然后从考虑是否应用大背景上我们分为两种,一种是允许整体有一个大背景,一种是头部,中间及底部都可以平铺一个全屏的大背景...

    先睹为快





    固定宽度的居中布局

    首先我们这里探讨的是我们常用的固定宽度的居中布局,这应该是目前实战中应用的最多的了。然后从考虑是否应用大背景上我们分为两种,一种是允许整体有一个大背景,一种是头部,中间及底部都可以平铺一个全屏的大背景。接着我们从有无边栏来讨论三种情况,一种是有左或右边栏,一种是没有边栏,最后一种就是左右边栏都存在的情况。我们在这探讨的布局方案借鉴与drupal的主题,所以如果是学过drupal这个cms的朋友应该会比较熟悉。


    html结构详解

    我们使用html5标签,所以有必要针对ie6-8导入html5.js。然后我们设置把所有的结构都包含在一个class为page的div里面,在这里div中我们还需要加上布局的class,aside-left,aside-right,two-sides,no-side分别对应左边栏,右边栏,左右两栏,没有边栏布局,这里我们以两栏布局为例,总共包括五个区域,分别为header,left,content,right,footer区域,每个区域里面我们增加了一层class为inner的div,这个inner主要是用来辅助我们布局,默认我们inner设置了margin左右的各位10px,可以根据实际需要来覆写。


    为什么要使用inner

    我们说了这个是用来辅助我们布局的,很多时候我们布局的时候不得不考虑border及左右的margin,padding等,现在我们完全把这些抛在脑后,交给我们的inner来完成。如整个宽度为1000px,左右边栏各为200px,而内容为600px。我们以前的思想应该是左右为200px,然后中间内容就是580px(margin为10px)或560px(margin为20px),这样我们如果需要改为980px,我们又得改好几个值,然后如果我们左右边栏要加个边框,又变成了202px,或者要设置左右宽度为198px,这是多么的纠结啊。现在引入inner,我们在布局的时候直接计算宽度不需要考虑border,margin,padding什么的,然后通过对各个区域里面的inner重新覆写,不就搞定了吗。这里贴出左右两栏的html代码供参考。具体的请看下面的demo

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    	<meta charset="UTF-8">
    	<title>aside left & right demo</title>
    	<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
    	<!--[if lt IE 9]>
    	<script src="js/html5.js" type="text/javascript"></script>
    	<![endif]-->
    </head>
    <body>
         把下面内容拷贝进来
    </body>
    </html>

    通用样式在最下

    如果需要为header,container及footer部分各设计一个全屏的背景,上面的这个肯定是不行的了,我们可以这三个div外面再加一层wrap,而这个wrap就是全屏的。


    左边栏布局

    HTML:

    <div class="page aside-left">
        <!--header begin-->
        <header id="header" class="clearfix">
            <div class="inner">
                <h1>header区域</h1>
                <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
            </div>        
        </header>
        
        <!--container begin-->
        <section id="container" class="clearfix">
            <!--aside_left begin-->
            <section id="aside_left" class="aside">
                <div class="inner">
                    <h2>左边栏区域</h2>
                    <ul>
                        <li>君子博学而日参省乎己,则知明而行无过矣。</li>
                        <li>神莫大于化道,福莫长于无祸</li>
                        <li>故言有招祸也,行有招辱也,君子慎其所立乎!</li>
                    </ul>
                </div>
            </section> 
            <!--main begin-->
            <section id="main">
                <div class="inner">
                    <h2>内容区域</h2>
                    <article>
                        <p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                        <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                    </article>
                </div>
            </section>
        </section>
        
        <!--footer begin-->
        <footer id="footer">
            <div class="inner">
                <h2>footer区域</h2>
                <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>
            </div>
        </footer>
    </div>


    右边栏布局

    HTML:

    <div class="page aside-left">
        <!--header begin-->
        <header id="header" class="clearfix">
            <div class="inner">
                <h1>header区域</h1>
                <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
            </div>        
        </header>
        
        <!--container begin-->
        <section id="container" class="clearfix">
            <!--main begin-->
            <section id="main">
                <div class="inner">
                    <h2>内容区域</h2>
                    <article>
                        <p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                        <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                    </article>
                </div>
            </section>
    
            <!--aside_right begin-->
            <section id="aside_right" class="aside">
                <div class="inner">
                    <h2>右边栏区域</h2>
                    <ul>
                        <li>君子博学而日参省乎己,则知明而行无过矣。</li>
                        <li>神莫大于化道,福莫长于无祸</li>
                        <li>故言有招祸也,行有招辱也,君子慎其所立乎!</li>
                    </ul>
                </div>
            </section> 
         </section>
         <!--footer begin-->
         <footer id="footer">
    	<div class="inner">
    		<h2>footer区域</h2>
    			<p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>             </div>
         </footer>
    </div>

    左右两边栏布局

    HTML:

    <div class="page two-asides">
    	<!--header begin-->
        <header id="header" class="clearfix">
        	<div class="inner">
            	<h1>header区域</h1>
                <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
            </div>    	
        </header>
        
        <!--container begin-->
        <section id="container" class="clearfix">
        	<!--aside_left begin-->
        	<section id="aside_left" class="aside">
                <div class="inner">
                	<h2>左边栏区域</h2>
                    <ul>
                    	<li>君子博学而日参省乎己,则知明而行无过矣。</li>
                        <li>神莫大于化道,福莫长于无祸</li>
                        <li>故言有招祸也,行有招辱也,君子慎其所立乎!</li>
                    </ul>
                </div>
            </section> 
            <!--main begin-->
        	<section id="main">
                <div class="inner">
                	<h2>内容区域</h2>
                    <article>
                    	<p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                        <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                    </article>
                </div>
            </section>
            <!--aside_left begin-->
        	<section id="aside_left" class="aside">
                <div class="inner">
                	<h2>右边栏区域</h2>
                    <ul>
                    	<li>君子博学而日参省乎己,则知明而行无过矣。</li>
                        <li>神莫大于化道,福莫长于无祸</li>
                        <li>故言有招祸也,行有招辱也,君子慎其所立乎!</li>
                    </ul>
                </div>
            </section> 
        </section>
        
        <!--footer begin-->
        <footer id="footer">
        	<div class="inner">
            	<h2>footer区域</h2>
                <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>
            </div>
        </footer>
    </div>

    无边栏布局

    HTML:

    <div class="page no-aside">
    	<!--header begin-->
        <header id="header" class="clearfix">
        	<div class="inner">
            	<h1>header区域</h1>
                <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
            </div>    	
        </header>
        
        <!--container begin-->
        <section id="container" class="clearfix">
            <!--main begin-->
        	<section id="main">
                <div class="inner">
                	<h2>内容区域</h2>
                    <article>
                    	<p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                        <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                    </article>
                </div>
            </section>
        </section>
        
        <!--footer begin-->
        <footer id="footer">
        	<div class="inner">
            	<h2>footer区域</h2>
                <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>
            </div>
        </footer>
    </div>

    全屏无边栏布局

    HTML:

    <div class="page no-aside">
    	<!--header begin-->
        <div id="header_wrap">
        <header id="header" class="clearfix">
        	<div class="inner">
            	<h1>header区域</h1>
                <p>青,取之于蓝,而青于蓝;冰,水为之,而寒于水。</p>
            </div>    	
        </header>
        </div>
        <!--container begin-->
        <section id="container" class="clearfix">
            <!--main begin-->
        	<section id="main">
                <div class="inner">
                	<h2>内容区域</h2>
                    <article>
                    	<p>学恶乎始?恶乎终?曰:其数则始乎诵经,终乎读礼;其义则始乎为士,终乎为圣人, 真积力久则入,学至乎没而后止也。故学数有终,若其义则不可须臾舍也。为之,人也;舍 之,禽兽也。故书者,政事之纪也;诗者,中声之所止也;礼者,法之大分,类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也,乐之中和也,诗书之博也,春秋之微 也,在天地之间者毕矣。君子之学也,入乎耳,着乎心,布乎四体,形乎动静。端而言,蝡而动,一可以为法则。小人之学也,入乎耳,出乎口;口耳之间,则四寸耳,曷足以美七尺之躯哉!古之学者为己,今之学者为人。君子之学也,以美其身;小人之学也,以为禽犊。故不问而告谓之傲,问一而告二谓之囋。傲、非也,囋、非也;君子如响矣。</p>
                        <p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。</p>
                    </article>
                </div>
            </section>
        </section>
        
        <!--footer begin-->
        <div id="footer_wrap">
        <footer id="footer"> 
            <div class="inner"> 
    		<h2>footer区域</h2> 
    		<p>积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得。</p>
    	</div>
         </footer>
         </div>
    </div>


    CSS code(以上都含有)

    /*reset*/
    html {
        height: 100%;
    }
    body {
        background-color: #FFFFFF;
        color: #404040;
        font: 12px/1.5 Helvetica,Arial,sans-serif;
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    h1, h2, h3, h4, h5, h6, p, blockquote, form, fieldset {
        margin: 0;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    input, select, label {
        vertical-align: middle;
    }
    img {
        border: medium none;
    }
    a {
        text-decoration: none;
    }
    p {
        padding: 0 0 9px;
    }
    h1, h2 {
        line-height: 36px;
    }
    h3 {
        line-height: 27px;
    }
    h4, h5, h6 {
        line-height: 18px;
    }
    h1 {
        font-size: 24px;
    }
    h2 {
        font-size: 20px;
    }
    h3 {
        font-size: 16px;
    }
    h4 {
        font-size: 14px;
    }
    h5, h6 {
        font-size: 12px;
    }
    ul, ol {
        margin: 0 0 18px;
        padding: 0;
    }
    ul li, ol li {
        margin-left: 25px;
    }
    ul ul, ul ol, ol ol, ol ul {
        margin-bottom: 0;
    }
    ul.nostyle {
        list-style: none outside none;
    }
    ul.nostyle li {
        margin-left: 0;
    }
    ul.inline-style {
        list-style: none outside none;
        margin-bottom: 0;
    }
    ul.inline-style li {
        display: inline;
        float: left;
        margin-left: 0;
    }
    dl {
        margin-bottom: 18px;
    }
    dt {
        font-weight: bold;
    }
    dd {
        margin: 0 0 0 9px;
        padding: 0;
    }
    article, aside, dialog, figure, footer, header, hgroup, nav, section {
        display: block;
    }
    .clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
        overflow: hidden;
    }
    .clearfix {
    }
    
    /*layout*/
    .page {
        height: auto !important;
        min-height: 100%;
        min-width: 1000px;
        width: 100%;
    }
    #header, #container, #footer {
        clear: both;
        margin: 0 auto;
        text-align: left;
        width: 1000px;
    }
    #container {
        padding: 20px 0;
    }
    #main, #aside_right, #aside_left {
        float: left;
    }
    .inner {
        margin: 0 10px;
    }
    #main {
        width: 1000px;
    }
    #aside_left {
        width: 300px;
    }
    .aside-left #main {
        width: 700px;
    }
    .aside-right #main {
        width: 700px;
    }
    #aside_right {
        width: 300px;
    }
    .two-asides #aside_left, .two-asides #aside_right {
        width: 200px;
    }
    .two-asides #main {
        width: 600px;
    }
    
    /*style*/
    #header {
        background-color: #EDEDED;
    }
    #header_wrap {
        background-color: #EDEDED;
    }
    #footer {
        background-color: #E1DACF;
    }
    #footer_wrap {
        background-color: #E1DACF;
    }
    #container {
        background-color: #CCCCCC;
    }
    #main {
        background-color: #FFFFFF;
    }
    #aside_left, #aside_right {
        background-color: #EFEFEF;
    }
    
    


    展开全文
  • span设置固定宽度

    千次阅读 热门讨论 2013-12-05 16:54:56
    在做"善良公社"项目时,用到了SPAN,因为是用来实现放块效果,所以给它定义了固定宽度,本以为胸有成竹的事,可执行网页时发现设定的宽度没有效果,让我郁闷了几分钟,看似很简单的样式定义尽然是无效。后来网上...


            <span> 标签被用来组合文档中的行内元素。相信对一般的网页设计师来讲是非常熟悉的朋友了,使用相当频繁,但我们往往很少对SPAN设定样式,一般也没什么必要,大多数都留给DIV老朋友了。 

        在做"善良公社"项目时,用到了SPAN,因为是用来实现放块效果,所以给它定义了固定宽度,本以为胸有成竹的事,可执行网页时发现设定的宽度没有效果,让我郁闷了几分钟,看似很简单的样式定义尽然是无效。后来网上搜索了相关资料,是这么解释的:CSS中的width属性并不总是有效的,如果对象是inline对象,width属性就会被忽略。FirefoxIE原来是遵循了标准才这样做的。 

        原因知道后,解决方案也就出来了,添加代码所示: 

    style="width:600px;text-align:left;display:inline-block;"

        效果对比 



     

             下面对<span>标签进行一下详细介绍。

        原始代码:

    <style type="text/css">
        .sc {
            width: 300px;
            list-style: none;
            font-size: 15px;
        }
    
            .sc li {
                list-style: none;
                width: 100%;
                margin: 10px 0px 0px 0px;
            }
    
            .sc span {
                width: 100px;
                text-align: center;
                display: inline-block;
                background: #C00;
                color: #FFF;
            }
    </style>
    <div class="sa">
        <span>张连海</span>
        <span>张 连 海</span>
    </div>
    
    

    
    

    
    

        效果如下:

    一、形如<span>ABC</span>独立行设置SPAN为固定宽度

        方法如下:

    span {width:60px;text-align:center; display:block; }

        测试实例:

    <style type="text/css">
        .sa span {
            width: 100px;
            text-align: center;
            display: block;
            background: #C00;
            margin: 10px 0px 0px 0px;
            color: #FFF;
            font-size: 15px;
        }
    </style>
    <div class="sa">
        <span>张连海</span>
        <span>张 连 海</span>
    </div>

        测试效果:



    二、形如<span>ABC</span>DEF格式行设置SPAN为固定宽度

        方法如下:

    span{width:60px; text-align:center;  display:block;float:left;}


        测试实例:

    <style type="text/css">
        .sb {
            width: 300px;
            list-style: none;
            font-size: 15px;
        }
    
            .sb li {
                list-style: none;
                width: 100%;
                margin: 10px 0px 0px 0px;
            }
    
            .sb span {
                width: 100px;
                text-align: center;
                  display:block;
                float: left;
                background: #C00;
                color: #FFF;
            }
    </style>
    <ul class="sb">
        <li><span>张连海</span>博客</li>
        <li><span>张 连 海</span>欢 迎 光 临</li>
    </ul>

        测试效果:



    三、形如ABC<span>DEF</span>GH格式行设置SPAN为固定宽度

        方法如下:

    span{width:60px; text-align:center; display:inline-block;}

        测试实例:

    <style type="text/css">
        .sc {
            width: 300px;
            list-style: none;
            font-size: 15px;
        }
    
            .sc li {
                list-style: none;
                width: 100%;
                margin: 10px 0px 0px 0px;
            }
    
            .sc span {
                width: 100px;
                text-align: center;
                display: inline-block;
                background: #C00;
                color: #FFF;
            }
    </style>
    <ul class="sc">
        <li>Welcome to <span>张连海</span>博客</li>
        <li>Welcome to <span>张 连 海</span>欢 迎 光 临</li>
    </ul>

        测试效果:



        提示:完美兼容就是把display属性设为inline-block,同时也可兼容前两种情况。


    四、block,inline,inline-block之间区别

        display:block;——类似与DIV标签的宽高边距等属性均可定制的元素特性;

        display:inline;——类似与<a>、<strong>标签的宽高等属性不可定制的元素特性;

        display:inline-block;——“全”可定制属性的元素特性; 


    五、如何设置让SPANfloat:right不换行

        1、如何让<li>AAA<span>BBB</span></li>里头的BBB靠右对齐且不换行?

        如果对span使用float属性,在IE下会导致span换到下一行,Firefox则正常。可以采用下面相对定位方法实现同行且居右对齐,即可实现。

    li {position:relative;}
    li span{position:absolute;right:0px;}


        2、反着写<span>也比较方便

        比如写做<li><span>AAA</span>BBB</li>,这样把AAA放到SPAN里,BBB放到外面。只需要:

    li {text-align:right;}
    li span{float:left;}
    


    展开全文
  • 标签中 如何固定<td> 宽度

    千次阅读 2018-05-15 11:54:21
    这是我div+css 布好的局我想在第一行,第一列格子内添加图片。没想到变成了这样, 下面是css代码。,随着td 内添加的图片和文字 撑开... w3school的介绍为:设置表格布局算法,参数为 列宽由表格宽度和列宽度设定。...

    这是我div+css 布好的局

    我想在第一行,第一列格子内添加图片。没想到变成了这样, 下面是css代码。

    ,

    随着td 内添加的图片和文字 撑开了td宽度。查找了资料,在css 中加入 table-layout:fixed; 属性后


    问题解决! table-layout:fixed;  w3school的介绍为:设置表格布局算法,参数为 列宽由表格宽度和列宽度设定。

    展开全文
  • 目录 1.CSS布局 2.绝对定位法 3.浮动法 1.CSS布局 2.绝对定位法 首先来看一个基本的布局框架: <!DOCTYPE html> <html> <head> <meta charset="UTF-8">...styl...

    目录

    1.CSS布局

    2.绝对定位法

    3.浮动法


    1.CSS布局

     

    2.绝对定位法

     首先来看一个基本的布局框架:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    	body{
    		text-align: center;
    	}
    	/* 给四个块设置样式 */
    	#head,#container,#content,#side,#foot{
    		margin:20px auto 20px auto;
    		padding:20px 0 20px 0;
    		border:1px red solid;
    	}
    	/* 设置宽度 */
    	#head,#container,#foot{
    		width:1000px;
    	}
    </style>
    </head>
    <body>
    <div id="head">head</div>
    <div id="container">
    	<div id="content">content</div>
    	<div id="side">side</div>
    </div>
    <div id="foot">foot</div>
    </body>
    </html>

    运行结果:

    加一些样式:

    运行效果:

     

    完整代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    	body{
    		text-align: center;
    	}
    	/* 给四个块设置样式 */
    	#head,#container,#content,#side,#foot{
    		margin:20px auto 20px auto;
    		padding:20px 0 20px 0;
    		border:1px red solid;
    	}
    	/* 设置宽度 */
    	#head,#container,#foot{
    		width:1000px;
    	}
    	/* 设置container样式 */
    	#container{
    		border:0px;
    		position: relative;
    		height: 250px;
    	}
    	/* 设置content样式 */
    	#content{
    		position: absolute;
    		width: 700px;
    		height: 200px;
    	}
    	/* 设置side样式 */
    	#side{
    		margin-left: 750px;
    		height: 100px;
    	}
    </style>
    </head>
    <body>
    <div id="head">head</div>
    <div id="container">
    	<div id="content">content</div>
    	<div id="side">side</div>
    </div>
    <div id="foot">foot</div>
    </body>
    </html>

     

    3.浮动法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
    	body{
    		text-align: center;
    	}
    	
    	#head,#container,#content,#side,#foot{
    		margin:20px auto 20px auto;
    		padding:20px 0px 20px 0px;
    		border: 1px solid red;
    	}
    	
    	#head,#container,#foot{
    		width: 900px;
    	}
    	
    	#container{
    		border:0px;
    	}
    	
    	#content{
    		float:left;
    		width: 700px;
    		height: 200px;
    	}
    	
    	#side{
    		float:right;
    		width: 180px;
    		margin-left: 10px;
    		height: 100px;
    	}
    	
    	#foot{
    		clear: both;
    	}
    </style>
    </head>
    <body>
    <div id="head">head</div>
    <div id="container">
    	<div id="content">content</div>
    	<div id="side">side</div>
    </div>
    <div id="foot">foot</div>
    </body>
    </html>

    运行效果:

    浮动法一般用得比较多! 

     

    展开全文
  • CSS 布局总结——固定宽度布局

    千次阅读 2014-04-18 11:36:04
    固定宽度布局 单列布局 固定宽度的单列布局中,外层指定宽度(如果没指定宽度,会自动伸展),设置 margin: 20px auto; 实现居中即可。 HTML结构: 单列固定宽度 Page Header
  • Simple scheme: 简单方案: <tr class="something"> <td>A</td> <td>B<
  • echarts 柱状图 固定柱宽 最大宽度

    万次阅读 2016-12-27 19:58:54
    echarts 柱状图 固定柱宽 最大宽度
  • flex 布局时,如何固定一栏宽度

    万次阅读 2019-02-21 19:51:46
    上面的样式就是固定宽度 200px。具体每个参数的意思是: 0 - 不拉长(flex-grow) 0 - 不缩短(flex-shrink) 200px - 开始于 200px (flex-basis) 来源: https://stackoverflow.com/a/23794791/3054511 ...
  • 一.display:table-cell的应用首先是简单的html:下面是css代码: 以下是效果图:必须注意的是,左侧div必须设置超过父元素减去右侧元素的宽度...可以看到左侧的没有设置宽度,但是却跟右侧的宽度一致,实现了宽度自...
  • css截取td里面的内容 如何固定td th的宽度
  • table表格单元格的宽度是个很玄学的东西 ...首行隐藏、固定宽度 下面我们来看代码 html部分 &lt;table&gt; &lt;!--第一组tr是用来固定宽度的,里面的td赋类名hide,稍后会隐藏--&gt; ...
  • selectpicker给固定宽度

    千次阅读 2018-07-16 16:40:12
    selectpicker默认宽度是auto,会根据下拉菜单的内容变化,这样会造成其他元素的排版混乱。所以初始化selectpicker的时候给固定宽度width  
  • html css div自适应屏幕宽度,高度

    万次阅读 2013-04-24 17:38:48
    做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化、缩小的自适应加以解决。   New Document ...width: expression(do
  • jquery datatable 设置指定列的宽度

    万次阅读 2017-06-10 16:00:31
    一、首先设置列的固定缩放为false 。 bSort: false, // 是否排序功能 bFilter: false, // 过滤功能 bPaginate: true, // 翻页功能 bInfo: t
  • 【问题】 ...现在希望设置固定的列宽,或者是自动填充宽度,以便不改变列宽,消除水平滚动条。 【解决过程】 1.想要参考之前已有的,关于row的宽度的设置: dgvCmtAuthorList.RowHeadersWidth =
  • 为了是table各列的宽度固定,需要做如下css设置: style='word-break:break-all;'
  • 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以下两点: 1)让两个div并排到一行 2)让一个div宽度固定,另个div占据剩下宽度的空间 关于第一...
  • 设置span固定宽度

    万次阅读 2012-09-06 20:47:18
    最近制作网站时发现给span设置宽度会无效,通过查阅CSS2标准中关于width 的定义发现,原来CSS中的 width 属性并不总是有效的,如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而...
  • Bootstrap datatable自适应宽度

    万次阅读 2017-11-15 09:59:02
    则调用 datatable后,会根据当前屏幕宽度生成固定宽度,这时候再调整浏览器大小,表格内容不能自适应变宽或变窄。 如果增加width:100%则可以跟随浏览器变化大小 本来table.datatable已经有css样式width:100% 但是...
  • 固定页面的最小宽度

    千次阅读 2018-01-30 14:56:22
    通过CSS样式设置网页的最小宽度,下面的样式将网页的最小宽度固定为600px html代码,将所有的内容都放到id=container的容器内 代码如下: CSS样式代码,指定最小宽度为600,兼容IE浏览器 ...
1 2 3 4 5 ... 20
收藏数 164,808
精华内容 65,923
关键字:

固定宽度