HTML5之三列式自适应布局（圣杯布局）
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">需求</span><span style="color: black;">上下</span>两列宽度固定，中间一列宽度自适应</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">很简单的布局</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">需求</span><span style="color: black;">上下</span>两列宽度固定，中间一列宽度自适应，那就<span style="color: black;">上下</span>两侧设置固定宽度，中间的宽度设为100%</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>left 设置margin-left ：-100% <span style="color: black;">这般</span>就有了左侧和中间部分在一行，右侧在下方</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">针对</span>right 设置margin-right ：-250px（右侧的宽度值），<span style="color: black;">这般</span>左中右就在一行</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">此刻</span>问题是左中右相互重合，<span style="color: black;">处理</span><span style="color: black;">办法</span>是设置中间的padding 值 ，把左侧右侧<span style="color: black;">表示</span>出来。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">由于</span>左侧设置了margin-left：-100%的属性，<span style="color: black;">因此</span>空出来一个left的宽度。接下来把left 向左移动他<span style="color: black;">自己</span>的宽度就行。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">由于</span>有了margin的值了，<span style="color: black;">因此</span><span style="color: black;">不可</span><span style="color: black;">经过</span>margin属性来移动，<span style="color: black;">因此</span><span style="color: black;">经过</span>定位来做</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">设置left为相对定位，距离其右侧350px，<span style="color: black;">亦</span><span style="color: black;">便是</span>向左350px。</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">the end</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">要点1：</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">三个div， left main right ，<span style="color: black;">她们</span>的width 属性分别是固定值，100%，固定值</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">要点2：</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">#left{ margin-left:-100%; } #right{ margin-right:固定值 }</p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">要点3：</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">#container{ padding-left：350px； padding-right：250px；}</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">大的div container padding设置，使得left right <span style="color: black;">表示</span></p>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">要点4：</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">left向左偏移350px</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
<style type="text/css">
body {
margin:50px;
min-width:950px;
}
#left{
bac<span style="color: black;">公斤</span>round:#16A085;
width:350px;
height:500px;
}
#main{
bac<span style="color: black;">公斤</span>round:#1ABC9C;
width:100%;
}
#right{
bac<span style="color: black;">公斤</span>round:#14856D;
width:250px;
height:500px;
}
.col{
float:left;
height:500px;
}
#left{
margin-left:-100%;
position: relative;
right:350px;
}
#right{
margin-right: -250px;
}
#container{
padding-left: 350px;
padding-right: 250px;
}
.col{
color:#FFF;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:23px;
line-height:1.5;
padding:30px 50px;
box-sizing:border-box;
}
.col img{
float:left;
margin:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="main" class="col">
<img src="star.png">
<p>Ramalinga as usual was walking into the Bhuvana Vijayam premises and the guards stopped him. He questioned why were they blocking the way. The soldiers told Ramalinga about the line and asked</div>
真情实感，其含义为认真了、走心了的意思，是如今的饭圈常用语。 外链发布论坛学习网络优化SEO。 你的话语如春风拂面，让我心生暖意。
页:
[1]