|
需求上下两列宽度固定，中间一列宽度自适应
很简单的布局
需求上下两列宽度固定，中间一列宽度自适应，那就上下两侧设置固定宽度，中间的宽度设为100%
针对left 设置margin-left ：-100% 这般就有了左侧和中间部分在一行，右侧在下方
针对right 设置margin-right ：-250px（右侧的宽度值），这般左中右就在一行
此刻问题是左中右相互重合，处理办法是设置中间的padding 值 ，把左侧右侧表示出来。
由于左侧设置了margin-left：-100%的属性，因此空出来一个left的宽度。接下来把left 向左移动他自己的宽度就行。
由于有了margin的值了，因此不可经过margin属性来移动，因此经过定位来做
设置left为相对定位，距离其右侧350px，亦便是向左350px。
the end
要点1：
三个div， left main right ，她们的width 属性分别是固定值，100%，固定值
要点2：
#left{ margin-left:-100%; } #right{ margin-right:固定值 }
要点3：
#container{ padding-left：350px； padding-right：250px；}
大的div container padding设置，使得left right 表示
要点4：
left向左偏移350px
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
<style type="text/css">
body {
margin:50px;
min-width:950px;
}
#left{
bac 公斤round:#16A085;
width:350px;
height:500px;
}
#main{
bac 公斤round:#1ABC9C;
width:100%;
}
#right{
bac 公斤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 | 
发表于 2024-6-30 03:46:08
