固定定位
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box{
position: fixed;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<img src="http://sgoutong.baidu.com/embed/1534324470/asset/embed/css/pc/icon/img/iconWord0.png" alt="">
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
图文混排
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 800px;
height: 500px;
font-size: 16px;
margin: 0 auto;
background-color: #efefef;
padding: 20px;
}
.box h2{
text-align: center;
}
.box img{
float: left;
width:400px;
margin-right: 15px;
margin-bottom: 15px;
}
.box p{
font-weight: bold;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">
<h2>普京出席奥地利外长婚礼：用德语祝贺 与新娘共舞</h2>
<img src="http://image1.chinanews.com.cn/cnsupload/big/2018/06-08/4-426/9971be7ec0374149a06be7ec1823412e.jpg" alt="">
<p>中新网8月19日电 综合报道，当地时间18日，俄罗斯总统普京应邀参加了奥地利外交部长克奈斯尔的婚礼。当天，普京携捧花抵达现场，并在婚礼上与新娘共舞。
据报道，普京在前往柏林郊外与德国总理默克尔举行会谈的途中，在奥地利过境停留。他携一束捧花，由准备为宾客献唱的歌手陪伴，乘车抵达婚礼会场。
婚礼的照片显示，新娘克奈斯尔满脸笑容，与普京共舞并交谈。</p>
<p> 俄罗斯卫星网报道称，普京向新人赠送了一幅乡村油画，一架老式榨油机和一个图拉茶炊，用德语表示了祝福并和新娘跳了一支舞。
报道还称，在与默克尔会谈前，普京就奥地利之行表示：“这一私人访问非常愉快，非常美好。”
在欧盟与俄罗斯因克里米亚问题等议题而关系恶化的背景下，普京获邀出席克奈斯尔的婚礼，让不少人感到惊讶。不过，俄总统新闻秘书佩斯科夫就西方国家批评克奈斯尔邀请普京出席其婚礼表示，俄方不会考虑此类批评。
此外，奥地利外交部也表示，普京出席婚礼不会影响奥地利的外交政策，因为普京的访问是私人访问。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.header,.footer{
width: 100%;
height: 60px;
background-color: #888888;
}
.content{
width: 1000px;
min-height: 100%;
background-color: #eeeeee;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
width: 1000px;
background-color: aqua;
margin: auto;
overflow: hidden;
}
.wrap{
width: 100%;
background-color: #FC0107;
float: left;
}
.main{
min-height: 600px;
margin: 0 200px;
}
.left{
width: 200px;
min-height: 600px;
background-color: #39FF1B;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
min-height: 600px;
background-color: blueviolet;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">网站头部</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.header,.footer{
width: 100%;
height: 60px;
background-color: lightgray;
}
.content{
width: 1000px;
min-height: 100%;
background-color: paleturquoise;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
width: 600px;
background-color: pink;
margin: auto;
padding:0 200px;
overflow: hidden;
}
.main{
width:100%;
min-height: 600px;
background-color: #39FF1B;
float: left;
}
.left{
width: 200px;
min-height: 600px;
background-color: olive;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
min-height: 600px;
background-color: blue;
float: left;
margin-left: -200px;
position:relative;
left: 200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部</div>
</div>
<div class="container">
<div class="main">主体</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。
圣杯和双飞翼都是两边固定中间自适应的三栏布局，都是保证中间栏进行优先渲染，圣杯布局是通过相对定位方法保证中间的div不被遮挡，双飞翼是通过增加一个子div，通过挤压的方式设置margin左右来保证中间栏不被遮挡。