inline-block横向排列元素间隔原因及去除间隔方法

1.问题出现的场景:

需要实现上面的布局,三张图横向排列,左图靠左,右图靠右,中间图居于中间,且图与图之间有固定间隔,起初通过如下方式实现(为了说明方便,直接通过内联样式表现):

<div style="width:100%;overflow:auto;">

<div style="width:32%;float:left"><img style="width:100%" src=" "/></div>

<div style="width:32%;margin-left:34%"><img style="width:100%" src=""/></div>

<div style="width:32%;float:right"><img style="width:100%" src=" "/></div>

</div>

该实现方式,通过float来控制左右两侧图靠两边停放,中间图通过计算三张图总宽96%,剩余4%,这4%需要分为两部分来实现与左右两边图之间的间距,因此,对中间图通过margin-left:34%来控制其与左右两边图的间距为2%

2.不想通过float来实现,想通过控制每个img的容器div宽度为33.33333%来平分宽度,同时控制该容器具有padding值来达到中间图和两边图的间距,即:

<div style="width:100%">

<div style="width:33.33333%;display:inline-block;"><img style="width:100%" src=" "/></div>

<div style="width:33.33333%;display:inline-block;"><img style="width:100%" src=" "/></div>

<div style="width:33.33333%;display:inline-block;"><img style="width:100%" src=" "/></div>

</div>

这样实现后,发现三个img的容器div没有设置任何margin和padding,可是图片不能放在一行显示,第三个图被挤到第二行,且图和图之间是有间隔的,经过上网查找原因及解决方法,发现真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,最终使用了给最外部父容器设置font-size:0的方法来去除inline-block排列之间的间隔,同时空过属性padding和border-box来实现间距,最终实现方式为如下:

<div style="width:100%;font-size:0;">

<div style="width:33.33333%;display:inline-block;padding:2px;box-sizing:border-box"><img style="width:100%" src=" "/></div>

<div style="width:33.33333%;display:inline-block;padding:2px;box-sizing:border-box"><img style="width:100%" src="
"/></div>

<div style="width:33.33333%;display:inline-block;padding:2px;box-sizing:border-box"><img style="width:100%" src="
"/></div>

</div>

时间: 2024-10-12 03:56:26

inline-block横向排列元素间隔原因及去除间隔方法的相关文章

css ul li 横向排列

因为li是块级元素,默认占一行的,要想实现横向排列,一般通过以下两个方法:float:left这样设置有一个问题,li浮动以后则脱离了文本流,即不占位置,如果它的父级元素有具体的样式且没有固定宽高,建议父元素清除浮动,或者设置固定宽高display:inline-block即把li变为行内元素且可以设置宽高以及边距,这样也有一个问题,低版本的Ie浏览器不兼容inline-block,建议在其后再加两个属性兼容低版本ie*display:inline;*zoom:1;

横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子div设置float左的时候,如果另外的子div没有设置float左的 话,两个浏览器下会有区别,具体有一个会产生间隙.兼容做法就是都设置float属性.但是记住有设置过float就要将float clear掉,不然下面的div会叠在已float的div上.我通常把清除浮动写成单独的<div clas

block(块级元素)和 inline(内联元素) 的区别

<td style="word-break:break-all"> 强制换行 <td  style="width:80px;display:block;boverflow: hidden;">超出隐藏,注意要设置宽度. 内联转化为块状:display:block 或 float:left / right 块状转化为内联:display:inline; 但是要注意内联元素是不能设置宽度和高度的.那就要强制把内联元素转换为块级元素了 div这样的

如何让div横向排列

方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inline就不会换新行了. <div style="display:inline;">aaa</div><div style="display:inline;">bbb</div> 方法二: 这里使用float:right属性.f

HTML+CSS-如何定义让两个div横向排列

方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inline就不会换新行了. <div style="background-color:#ff0000;display:inline;">aaa</div> <div style="background-color:#ffff00;display:inline

如何定义让两个div横向排列

方法一: 一般情况,默认的div是写一个换一行,那么如何定义两个div横向排列而不换行呢? div默认的display属性是block.所以每一个div都是新的一行,现在把display换成inline就不会换新行了. <div style="display:inline;">aaa</div><div style="display:inline;">bbb</div> 方法二: 这里使用float:right属性.f

inline block inline-block总结

一.block表示块级元素,其元素通常会单独成一块,独占一行: 二.inline表示内联元素,不会产生换行,其排版会在一行显示,直到一行被占满. 三.常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等:常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR        等. 四.一般使用display:block与display:inline来改变元素的

【CSS技巧】列表横向排列的另一种方法

列表<ul><dl>等默认是纵向排列.我们需要它横向排列时通常会用float来实现,但是使用了float也通常会引发一些排版问题.今天我学到了另一种方法:设定<li>标签的display:inline,把<li>设定为内联元素来实现横向排列的效果,不需要使用float. <!doctype html> <html> <head> <meta charset="utf-8"> <titl

DIV横向排列_CSS如何让多个div盒子并排同行显示

如何让多个div盒子并排同行div横向排列显示呢? 我们先设置3个div盒子对象,什么css样式都不设置看看效果.代码如下: 三个div盒子均独占一行显示 div盒子本身默认样式属性是独占一行,而解决div独占一行方法通常有两种,一种为设置浮动,另外一种为设置display样式.接下来为大家通过文章+图片+案例方法介绍解决div盒子对象并排横向排列且同行显示方法. 一.使用css float并排显示 我们对div设置一个float浮动属性即可解决不并排显示,只要你的并排div盒子总宽度小于或等于