css-常用布局方法04-inline-block布局

一、css-常用布局方法

1. inline-block 布局

• 像文本一样排block元素
• 没有清除浮动等问题
• 需要处理间隙问题
  • 原因：字符间距
  • 解决：消灭字符或者消灭间距

效果：

当我们将父容器的宽度改成400px

明显看到中间有一道缝隙，这就是inline-block产生的问题

解决方案：

方案一：推荐做法

• 将父元素的字体设置为0

• 到各子元素，再将字体设置成正常的值

  .container {
    width: 300px;
    height: 100px;
    font-size: 0;
  }
  .left {
    background: green;
    width: 200px;
    height: 100px;
    display: inline-block;
    font-size: 16px;
  }
  .right {
    background: red;
    width: 100px;
    height: 100px;
    display: inline-block;
    font-size: 16px;
  }
  

方案二：

• 注释两个标签间的空格

方案三：

• 删除两个标签间的空格