以下在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;
}
效果: