网页设计：双栏布局

最新推荐文章于 2022-04-18 21:19:10 发布

weixin_33721427

最新推荐文章于 2022-04-18 21:19:10 发布

阅读量398

点赞数

文章标签： python

原文链接：https://my.oschina.net/letiantian/blog/529811

版权

2019独角兽企业重金招聘Python工程师标准>>>

以下在runjs测试。浏览器为Firefox 41.

示例1：右栏固定，左栏占剩下的空间

代码来自2 column div layout: right column with fixed width, left fluid：

html：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
        
        <div class="container">
            <div class="right">
                right content fixed width
            </div>
            <div class="left">
                left content flexible width
            </div>
        </div>
        
    </body>
</html>

css：

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}

效果：

输入图片说明

去掉containter也可以。

示例2：右栏固定，左栏占剩下的空间；整体宽度较小时候，左右变成上下关系

代码来自2 column div layout: right column with fixed width, left fluid。

html：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>

        <div style="background: #f1f200;">
            <div id="container">
                <div id="content">
                    <strong>Column 1 - content</strong>
                </div>
            </div>
            <div id="sidebar">
                <strong>Column 2 - sidebar</strong>
            </div>
            <div style="clear:both"></div>
        </div>
        
    </body>
</html>

css：

#container {
    margin-right: -300px;
    float:left;
    width:100%;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
		background: red;
}
#sidebar {
    width:300px;

    float:left
}
@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }
}

clear属性规定元素的哪一侧不允许其他浮动元素。both指左右两侧都不允许浮动。

效果：

输入图片说明

关于clear:left

clear 属性规定元素的哪一侧不允许其他浮动元素，值为left、right、both（左右）等。看一下http://www.w3school.com.cn/cssref/pr_class_clear.asp的例子。

不加clear：

<html>

<head>
<style type="text/css">
img
  {
  float:left;
  }
</style>
</head>

<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>

</html>

效果：

输入图片说明

加入clear属性：

<html>

<head>
<style type="text/css">
img
  {
  float:left;
  clear:both;
  }
</style>
</head>

<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>

</html>

效果：
输入图片说明

containter的margin-right: -300px;

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>

        <div>
            <div id="container">
                <div id="content">
                    <strong>Column 1 - content asa aaa as asdc asd</strong>
                </div>
                <div id="content-right">
									<br/>Column right
                </div>                
            </div>
					
            <div id="sidebar">
                <strong>Column 2 - sidebar</strong>
            </div>
            <div style="clear:both"></div>
        </div>

    </body>
</html>

#container {
    /*width:100%;*/
    margin-right: -300px;
    min-height:50px;
    float:left;
    background: cyan;
}
#content {
    margin-right: 320px; /* 20px added for center margin */
    background: red;
}
#content-right {
    float:right;
}

#sidebar {
    width:300px;
    float:left;
    background:green;
}

这里把width:100%;注释了。

效果如下：
输入图片说明

如果去掉width:100%;的注释：
输入图片说明

所以containter的内容不会向右超过浏览器的界面。其margin-right属性是针对其右侧的sidebar而言。

container中content的margin-right: 320px;导致red和green之间的cyan宽度为20px。

关于div

<div> 默认是一个块级元素。这意味着它的内容自动地开始一个新行。

示例。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    </head>
    <body>
            
        <div>123456</div>
        <div>789101112</div>

        <div id="container">
            <div id="content">
                <strong>Column 1 - content asa aaa as asdc asd</strong>
            </div>
            <div class="content-right">
                Column right 1
            </div>      
            <div class="content-right">
                Column right 2
            </div>             
            <div class="content-right">
                Column right 3
            </div>                
        </div>
                

    </body>
</html>

#container {
	  width:100%;
	  background: cyan;
}
#content {
	 width:320px;
		float:left;
    background: red;
}
.content-right {
    float:right;
	  background: green;
}

效果：

输入图片说明