HTML 代码：
<div class="i-box clearfix">
<div class="layout-l clearfix">
<div class="i-left">
<p>左侧定宽</p>
</div>
<div class="i-right">
<p>右侧自适应</p>
</div>
</div>
</div>
<div class="i-box clearfix">
<div class="layout-r clearfix">
<div class="i-right">
<p>右侧定宽</p>
</div>
<div class="i-left">
<p>左侧自适应</p>
</div>
</div>
</div>
<div class="i-box clearfix">
<div class="layout-both clearfix">
<div class="i-left">
<p>左侧定宽</p>
</div>
<div class="i-right">
<p>右侧定宽</p>
</div>
</div>
</div>
<div class="i-box clearfix">
<div class="layout-three clearfix">
<div class="i-left">
<p>左侧定宽</p>
</div>
<div class="i-right">
<p>右侧定宽</p>
</div>
<div class="i-mid">
<p>中间自适应</p>
</div>
</div>
</div>
<div class="i-box clearfix">
<div class="layout-three-ll">
<div class="i-left">
<p>左侧定宽</p>
</div>
<div class="i-mid">
<p>左侧定宽</p>
</div>
<div class="i-right">
<p>右侧自适应</p>
</div>
</div>
</div>
<div class="i-box clearfix">
<div class="layout-three-rr">
<div class="i-mid">
<p>右侧定宽</p>
</div>
<div class="i-right">
<p>右侧定宽</p>
</div>
<div class="i-left">
<p>左侧自适应</p>
</div>
</div>
</div>
之前是用less写的样式，可能用起来会灵活一些，在这里提供less和CSS两个版本
Less 代码：
/* @base-width 容器宽度 可以为 px 或 百分比 */
@base-width: 100%;
/*
* @fix-width-l 左侧固定宽度 可以为 px 或 百分比
* @fix-width-r 右侧固定宽度 可以为 px 或 百分比
*/
@fix-width-l: 300px;
@fix-width-r: 300px;
@bg-color1: blue;
@bg-color2: red;
@bg-color3: green;
.i-box{
width: @base-width;
margin: 10px auto;
}
// 左侧定宽, 右侧自适应
.layt1(@f-width,@color1,@color2){
> .i-left {
float: left;
width: @f-width;
background-color: @color1;
}
> .i-right{
overflow: auto;
background-color: @color2;
}
}
// 右侧定宽, 左侧自适应
.layt2(@f-width,@color1,@color2){
> .i-right {
float: right;
width: @f-width;
background-color: @color1;
}
> .i-left{
overflow: auto;
background-color: @color2;
}
}
// 右侧定宽, 左侧定宽
.layt3(@f-width-l,@f-width-r,@color1,@color2){
> .i-left {
float: left;
width: @f-width-l;
background-color: @color1;
}
> .i-right{
float: right;
width: @f-width-r;
background-color: @color2;
}
}
// 左右定宽中间自适应
.layt-thr-1(@fix-width-l,@fix-width-r,@color1,@color2,@color3){
.i-left{
float: left;
width: @fix-width-l;
background-color: @color1;
}
.i-mid{
margin-left: @fix-width-r + 10px;
margin-right: @fix-width-l + 10px;
background-color: @color2;
overflow: auto;
}
.i-right{
float: right;
width: @fix-width-r;
background-color: @color3;
}
}
.layt-thr-2(@fix-width1,@fix-width2,@color1,@color2,@color3){
.i-left{
float: left;
width: @fix-width1;
background-color: @color1;
}
.i-mid{
float: left;
width: @fix-width2;
background-color: @color2;
}
.i-right{
margin-left: @fix-width1 + @fix-width2;
background-color: @color3;
}
}
.layt-thr-3(@fix-width1,@fix-width2,@color1,@color2,@color3){
.i-left{
margin-right: @fix-width1 + @fix-width2;
background-color: @color3;
}
.i-mid{
float: right;
width: @fix-width2;
background-color: @color2;
}
.i-right{
float: right;
width: @fix-width1;
background-color: @color1;
}
}
.layout-l{
color: white;
line-height: 30px;
.layt1(@fix-width-l,@bg-color1,@bg-color2);
}
.layout-r{
color: white;
line-height: 30px;
.layt2(@fix-width-r,@bg-color1,@bg-color2);
}
.layout-both{
color: white;
line-height: 30px;
.layt3(500px,700px,@bg-color1,@bg-color2);
}
.layout-three{
color: white;
line-height: 30px;
.layt-thr-1(@fix-width-l,@fix-width-r,@bg-color1,@bg-color2,@bg-color3);
}
.layout-three-ll{
color: white;
line-height: 30px;
.layt-thr-2(200px,200px,@bg-color1,@bg-color2,@bg-color3);
}
.layout-three-rr{
color: white;
line-height: 30px;
.layt-thr-3(200px,200px,@bg-color1,@bg-color2,@bg-color3);
}
CSS代码：
.i-box {
width: 100%;
margin: 10px auto;
}
.layout-l {
color: white;
line-height: 30px;
}
.layout-l > .i-left {
float: left;
width: 300px;
background-color: #0000ff;
}
.layout-l > .i-right {
overflow: auto;
background-color: #ff0000;
}
.layout-r {
color: white;
line-height: 30px;
}
.layout-r > .i-right {
float: right;
width: 300px;
background-color: #0000ff;
}
.layout-r > .i-left {
overflow: auto;
background-color: #ff0000;
}
.layout-both {
color: white;
line-height: 30px;
}
.layout-both > .i-left {
float: left;
width: 500px;
background-color: #0000ff;
}
.layout-both > .i-right {
float: right;
width: 700px;
background-color: #ff0000;
}
.layout-three {
color: white;
line-height: 30px;
}
.layout-three .i-left {
float: left;
width: 300px;
background-color: #0000ff;
}
.layout-three .i-mid {
margin-left: 310px;
margin-right: 310px;
background-color: #ff0000;
overflow: auto;
}
.layout-three .i-right {
float: right;
width: 300px;
background-color: #008000;
}
.layout-three-ll {
color: white;
line-height: 30px;
}
.layout-three-ll .i-left {
float: left;
width: 200px;
background-color: #0000ff;
}
.layout-three-ll .i-mid {
float: left;
width: 200px;
background-color: #ff0000;
}
.layout-three-ll .i-right {
margin-left: 400px;
background-color: #008000;
}
.layout-three-rr {
color: white;
line-height: 30px;
}
.layout-three-rr .i-left {
margin-right: 400px;
background-color: #008000;
}
.layout-three-rr .i-mid {
float: right;
width: 200px;
background-color: #ff0000;
}
.layout-three-rr .i-right {
float: right;
width: 200px;
background-color: #0000ff;
}
时间： 2024-10-09 00:54:57