<!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
原创文章如转载，请注明出处“
伊人博客”