伊人博客 一款有技术又有生活的博客

两端固定大小,中间区域自适应的css写法(无js控制)

发布时间:2018-07-15 10:36:50 标签:css | 阅读(129)

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

margin:0;

padding:0;

color: white;

}

</style>

</head>

<body>

<!-- 先写一个外层div,表示这是一块东西,一行 -->

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

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:100%;height:200px;position:relative;">

<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


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

站内搜索
关注公众号(随时搜索)
文章归档
热门推荐
随机推荐
冷门晾晒