div 與 inline block 空隙?

想問問假設

<div class="layout">
<div class="layoutDiv">內容</div>
<div class="layoutDiv">內容</div>
<div class="layoutDiv">內容</div>
<div class="layoutDiv">內容</div>
<div class="layoutDiv">內容</div>
</div>
.layout
{
    width:100%;
    margin: 0 auto;
}
.layoutDiv
{
    cursor: pointer;
    position: relative;
    width: 50%;
    height: 100vh;
    display: inline-block;
    margin: 0;
}

這樣會讓div之間有空隙,於是導致他沒辦法一行兩個
他會跑到下面去......

阅读 3.9k
8 个回答

换行符导致的,最简单的就是给layout添加font-size:0,而且这种问题网上真的是一搜一大把,http://www.zhangxinxu.com/wor... 这里有个张鑫旭的,可以看看

  .layout
  {
      width:100%;
      margin: 0 auto;
      font-size:0;
  }
  .layoutDiv
  {
      cursor: pointer;
      position: relative;
      width: 50%;
      height: 100vh;
      display: inline-block;
      margin: 0;
     font-size: 14px;
  }
或者去掉div之间的空格试试

谢邀.

inline-block元素间会有空隙,是因为每个元素间都会有换行(指每个layoutDiv类的<div>元素之间),具体的解决方案详见去除inline-block元素间间距的N种方法,我就不再赘述了。

inline-block把换行解析成空格了- -这是七八年前的问题了。。你可以自己百度下解决方法的
下面给个例子

.layout{font-size:0;}
.layoutDiv{font-size:16px;}

空白字符。

<div class="layout">
<div class="layoutDiv">內容</div><div class="layoutDiv">內容</div><div class="layoutDiv">內容</div><div class="layoutDiv">內容</div><div class="layoutDiv">內容</div>
</div>

浮动

.layoutDiv {
  float: left;
}

inline-block会有3-4px的间距。本身的属性带的。所以要想没有空隙,需要用浮动float属性

这是inline-block把换行解析成空格了。。一般我们设置父级元素font-size:0就可以解决了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题