CSS之三列自适应布局

最新推荐文章于 2022-08-18 09:49:53 发布

xiaobai_dreamWeaver

最新推荐文章于 2022-08-18 09:49:53 发布

阅读量905

点赞数 1

分类专栏：前端交流学习文章标签： CSS 自适应布局 css3

本文链接：https://blog.youkuaiyun.com/xiaobai_dreamWeaver/article/details/53909556

版权

前端交流学习专栏收录该内容

12 篇文章

订阅专栏

不知什么原因,图片贴不进来,三列自适应布局方法也很多,个人感觉CSS3是最简单的,但要考虑浏览器兼容(下面的没有考虑这点).

1.固定左右宽,中间宽度自适应

【1】左右各自向左右浮动即可!

<!DOCTYPE html>

<html>

<head>

</head>

body div{margin:0;padding:0; }

#left{

width:200px;

border:1px solid red;

float:left;

}

#middle{

width:auto;

border:1px solid black;

margin:0 202px 0 202px;

}

#right{

float:right;

width:200px;

border:1px solid blue;

}

</style>

<body>

<div id="left">这是左边部分</div>

<div id="right">这是右边部分</div>

<div id="middle">这是中间部分</div>

</div>

</body>

</html>

注:左中右三个div的位置很重要,如果把中间和右边调换位置,中间在左边浮动后,Middle这块div会没有浮动而独自占据一行,导致右边右浮动的时候上不去.

【2】margin负值

<!DOCTYPE html>

<html>

<head>

<title>CSS-自适应布局</title>

</head>

body div{margin:0;padding:0;}

#wrap{

min-width:1000px;

}

#left{

width:200px;

border:1px solid red;

float:left;

}

#middle{

width:auto;

border:1px solid black;

margin:0 203px 0 202px;

}

#right{

float:right;

width:200px;

border:1px solid blue;

margin-top:-20px; //此值为middle的div的高度的负数(具体情况具体设置)

}

</style>

<body>

<div id="left">这是左边部分</div>

<div id="middle">这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分</div>

<div id="right">这是右边部分</div>

</div>

</body>

</html>

【3】CSS实现

<!DOCTYPE html>

<html>

<head>

</head>

body div{margin:0;padding:0; }

#wrap{

display:flex;

}

#left{

width:200px;

border:1px solid red;

}

#middle{

flex:1;

border:1px solid black;

}

#right{

width:200px;

border:1px solid blue;

}

</style>

<body>

<div id="left">这是左边部分这是左边部分这是左边部分这是左边部分</div>

<div id="middle">这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分</div>

<div id="right">这是右边部分</div>

</div>

</body>

</html>

2.两边宽度自适应,中间固定宽度

【1】浮动实现

<!DOCTYPE html>

<html>

<head>

<title>CSS-自适应布局</title>

</head>

body div{margin:0;padding:0;}

#middle{

width:300px;

float:left;

border:1px solid black;

}

#left,#right{

float:left;

margin:0 0 0 -151px;

width:50%;

}

.inner{

padding:20px;

}

#left .inner,

#right .inner{

margin:0 0 0 151px;

border:1px solid red;

}

</style>

<body>

<div class="inner">这是左边这是左边这是左边这是左边</div>

</div>

</div>

</div>

</body>

</html>

【2】CSS3实现

<!DOCTYPE html>

<html>

<head>

<title>CSS-自适应布局</title>

</head>

body div{margin:0;padding:0;}

body{

display:flex;

}

#middle{

width:300px;

border:1px solid black;

}

#left,#right{

flex:1;

width:auto;

border:1px solid red;

}

</style>

<body>

<div id="left">这是左边这是左边这是左边这是左边</div>

<div id="right">这是右边这是右边这是右边这是右边</div>

</body>

</html>

3.三边自适应

【1】浮动

<!DOCTYPE html>

<html>

<head>

<title>CSS-自适应布局</title>

</head>

body div{margin:0;padding:0;float:left; }

#left,#right{

border:1px solid red;

width:40%;

}

#middle{

border:1px solid black;

}

</style>

<body>

<div class="inner">这是左边这是左边这是左边这是左边</div>

</div>

</div>

<div class="inner">这是右边这是右边这是右边这是右边这是右边</div>

</div>

</body>

</html>

【2】CSS3设置

<!DOCTYPE html>

<html>

<head>

<title>CSS-自适应布局</title>

</head>

body div{margin:0;padding:0;float:left; }

body{

display:flex;

}

#left,#right,#middle{

flex:1;

}

#left,#right{

background:red;

}

#middle{

background:orange;

}

</style>

<body>

<div class="inner">这是左边这是左边这是左边这是左边</div>

</div>

</div>

<div class="inner">这是右边这是右边这是右边这是右边这是右边</div>

</div>

</body>

</html>