div 等块级标签横向排列的方法总结

块级标签的默认文档流是上下排列的,再配上横向排列的方法,请过适当的嵌套,可以应对几乎所有常见的布局需求,因此,我决定总结一下 div 横向排列的方法。这也是我初学前端时最困扰的问题~

以下面这组 div 为例,wrap 的高度由内容撑开

<div id="wrap">
    <div id="div1">div1div>
    <div id="div2">div2div>
    <div id="div3">div3div>
div>

平时是这样的,上下排列~

div 等块级标签横向排列的方法总结_第1张图片

float 浮动

#div1{
    float: left;
}
#div2 {
    float: right;
}
#div3 {
    float: right;
}

然后这样了

div 等块级标签横向排列的方法总结_第2张图片

成功横向排列了,但是有几个问题~

float 的特点:

  • 多个 div 右浮动时,顺序会颠倒,请注意看 div2 和 div3,可以通过将它们再用一个 div 包起来,然后对它们设置左浮动,对父 div 设置右浮动来解决。

  • 脱离文档流,若父元素高度由内容撑开,那么就撑不开,从图中可以看到 wrap 没了,因为高度变为了 0,可通过清浮动来解决。

  • 文字会环绕在浮动元素周围,图中未表现出来。

  • 不能换行,图中未表现出来。

inline-block 行块标签

#div1, #div2, #div3{
    display: inline-block;
}

div 等块级标签横向排列的方法总结_第3张图片

横排成功~但同样有些问题:

inline-block 特点:

  • 元素间会有空白。这个空白其实是空白符,因为 inline-block 会使元素在行内排列,也就是跟文字在一起排列,而我们源代码中 div 和 div 之间的空格、Tab、换行符在浏览器里会被合并成一个空白符,所以就会出现缝隙,常见的解决方案有:

    1. 通过给父元素设置 font-size: 0; ,使空白符不可见。但会导致子元素中继承的字体大小也为 0,解决方案:
      1. 可以明确子元素内字体大小的,为其单独设置文字大小。
      2. 可以使用 rem 作为字体大小单位来继承 HTML 根元素的字体大小属性。
    2. 在源代码里把前一个 div 的结束标签和后一个 div 的开始标签贴在一起。可读性极差,丑拒。

      <div id="wrap">
          <div id="div1">div1
          div><div id="div2">div2
          div><div id="div3">div3div>
      div>
    3. 不用 inline-block,嘿嘿~
  • 可以换行,如下图

div 等块级标签横向排列的方法总结_第4张图片

flex 弹性盒模型

最爱的解决方案,给父元素设置 display: flex; 即可。

#wrap{
    display: flex;
}

效果图:

div 等块级标签横向排列的方法总结_第5张图片

还可以通过 justify-content 属性调整子元素的水平对齐方式:

#wrap{
    display: flex;
    justify-content: flex-start;
}

flex-start:

默认,图同上。

flex-end:

div 等块级标签横向排列的方法总结_第6张图片

center:

div 等块级标签横向排列的方法总结_第7张图片

space-around:

div 等块级标签横向排列的方法总结_第8张图片

space-between:

div 等块级标签横向排列的方法总结_第9张图片

不过当父元素宽度不够时, flex 默认是不会换行的,而是会等比例压缩,缩放比例 flex-shrink 属性或复合属性 flex 相关。

div 等块级标签横向排列的方法总结_第10张图片

通过 flex-wrap 属性可以使其换行,该值有三个取值 nowrapwrapwrap-reverse,默认为 nowrap

#wrap{
    display: flex;
    flex-wrap: nowrap;
}

nowrap

默认,图略。

wrap

div 等块级标签横向排列的方法总结_第11张图片

wrap-reverse

div 等块级标签横向排列的方法总结_第12张图片

flex 使用不再深入探讨,推荐阮一峰写的教程 Flex 布局教程:语法篇

定位,慎用

绝对定位,相对定位,根据实际需求选用,切忌滥用。

负的margin

见一个打死一个!!!

table,已废弃,略~

你可能感兴趣的:(技术笔记)