两端固定大小，中间区域自适应的css写法（无js控制）

最新推荐文章于 2024-08-26 21:48:51 发布

yxxrui

最新推荐文章于 2024-08-26 21:48:51 发布

阅读量124

点赞数

文章标签： html css js css3 jquery

本文链接：https://blog.csdn.net/yxxrui/article/details/107175687

版权

<!doctype html>

<html>

<head>

<title>Document</title>

margin:0;

padding:0;

color: white;

}

</style>

</head>

<body>

<!-- 需要着重注意的是：

1、由于文字是有大小的，也就导致了div与div之间的空行或者空格是有宽度的，这样会导致三个div无法放到一行的情况，解决办法常见的有三种：（一、设置总div的font-size为0，后期用到字体之后再重新设置回来。二、让标签收尾相连，不美观。三、使用注释，把两个div之间的空白注释掉，切记切记）

2、html会根据先后顺序来覆盖层，也就是中间那个div会遮住左边那个div，这样的话后期如果左侧div上有按钮或者链接都无法点击。解决方法：设置左侧div的z-index，让该值大于中间那个div的z-index，但是必须注意的是：z-index在一个被inline-block的div上是不起作用的，必须设置position为relative才行

3、所有div一旦被设置了inline-block，那么他的盒模型就有了问题，会把宽度和margin和padding加到一起，需要设置box-sizing:border-box才可以解决 -->

<div style="width:80px;height:100%;display:inline-block;background:red;z-index:1;position:relative;">abc</div><!--

--><div style="width:100%;height:100%;margin-left:-80px;padding-left:90px;margin-right:-100px;padding-right:100px;display:inline-block;background:gray;box-sizing:border-box;z-index:0;">1231</div><!--

--><div style="width:100px;height:100%;display:inline-block;background:yellow;">hij</div>

</div>

</body>

</html>

下载地址：test.zip

原创文章如转载，请注明出处“ 伊人博客”

yxxrui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两端固定大小，中间区域自适应的css写法（无js控制）

<!doctype html><html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin:0;padding:0;color: white;}</style><...
复制链接

扫一扫