html – 内联块DIV元素之间的额外空间[复制]

概述参见英文答案 > Why is there an unexplainable gap between these inline-block div elements?                                    6个 我正在使用CSS列布局模块创建流畅的布局,当2个或更多元素位于列的同一“行”时,我看到意外的结果.元素之间将出现3到4 px的间隙.我已经在IE11,Fir 参见英文答案 > Why is there an unexplainable gap between these inline-block div elements?6个
我正在使用CSS列布局模块创建流畅的布局,当2个或更多元素位于列的同一“行”时,我看到意外的结果.元素之间将出现3到4 px的间隙.我已经在IE11,firefox 24,Chrome 31和Safari 5.1.7中进行了测试,它们都表现出相同的行为.

<div >    <div >1</div>    <div >2</div>    <div >3</div>    <div >4</div>    <div >5</div>    <div >6</div>    <div >7</div>    <div >8</div></div>.tile-container {    -moz-column-wIDth: 250px;    -webkit-column-wIDth: 250px;    column-wIDth: 250px;    column-fill: auto;    height: 502px;    background-color: gray;}.tile-large {    wIDth: 250px;    height: 250px;    -webkit-column-break-insIDe: avoID;    break-insIDe: avoID;    display: inline-block;    background-color: green;}.tile-wIDe {    wIDth: 250px;    height: 125px;    -webkit-column-break-insIDe: avoID;    break-insIDe: avoID;    display: inline-block;    background-color: blue;}.tile-small {    wIDth: 125px;    height: 125px;    -webkit-column-break-insIDe: avoID;    break-insIDe: avoID;    display: inline-block;    background-color: red;}

我不想开始使用负边距来缩小差距,因为我想引入拖放行为.左边的浮动将消除差距,但这引入了另一组问题.奇怪的是,当我使用jqueryUI sortable时,在drop事件和jqueryUI排列元素之后,差距就不再存在了.

解决方法 您需要注释掉元素之间的空白区域,如下所示：

<div >       <div >1</div><!--    --><div >2</div><!--    --><div >3</div><!--    --><div >4</div><!--    --><div >5</div><!--    --><div >6</div><!--    --><div >7</div><!--    --><div >8</div></div>

演示：http://jsfiddle.net/P7cbA/11/

另一种方法是将HTML中的元素放在一行中,它们之间没有任何空格,但这会降低代码的可读性：

<div >       <div >1</div><div >2</div><div >3</div><div >4</div><div >5</div><div >6</div><div >7</div><div >8</div></div>

总结

以上是内存溢出为你收集整理的html – 内联块DIV元素之间的额外空间[复制]全部内容，希望文章能够帮你解决html – 内联块DIV元素之间的额外空间[复制]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。