三列浮动中间列宽度自适应

最新推荐文章于 2021-01-29 17:24:03 发布

codeshark

最新推荐文章于 2021-01-29 17:24:03 发布

阅读量1.2k

点赞数

分类专栏： Div+CSS 文章标签： xhtml 浏览器 html

本文链接：https://blog.csdn.net/codeshark/article/details/2626875

版权

Div+CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

要求：3列布局，左栏要求固定宽度并且居左显示；右栏要求固定宽度并居右显示；而中间栏要求根据左右栏间距自适应居中显示。

说明：浮动定位：主要由浏览器根据对象的内容自动进行浮动方向的调整。当这种方式不能满足定位需求时，就需要用到绝对定位position属性来实现。有三个值position:static：默认属性值；position:absolute，对象将根据整个页面的位置进行重新定位，当使用次属性时，可以使用top,right,bottom,left4个属性进行方向定位，以确定对象的具体位置。position:relative，相对定位。

通俗的说：使用绝对定位position:absolute后，对象就像一个图层一样漂浮在网页上面。与其它对象分离开。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>三列浮动中间列宽度自适应</title>

<style type="text/css">

body{margin:0px;padding:0px;} /*不设置次属性，中间的center会与left,right不在同一水平线上*/

#left{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;position:absolute;top:0px;left:0px;}

#center{background-color:#cccccc;border:2px solid #333333;height:300px;margin-left:104px;margin-right:104px;}

#right{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;position:absolute;top:0px;right:0px;}

</style>

</head>



<body>

<div id="left">左列</div>

<div id="center">中列</div>

<div id="right">右列</div>

</body>

</html>

codeshark

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三列浮动中间列宽度自适应

要求：3列布局，左栏要求固定宽度并且居左显示；右栏要求固定宽度并居右显示；而中间栏要求根据左右栏间距自适应居中显示。说明：浮动定位：主要由浏览器根据对象的内容自动进行浮动方向的调整。当这种方式不能满足定位需求时，就需要用到绝对定位position属性来实现。有三个值position:static：默认属性值；position:absolute，对象将根据整个页面的位置进行重新定位，当使用次属性
复制链接

扫一扫