text-align:justify实现两端对齐布局

2019独角兽企业重金招聘Python工程师标准>>>

css:

  .box {
            width: 256px;
            height: 256px;
            border-bottom: 1px dashed #ccc;
            text-align: justify;
            font-size: 0;
            /*text-align:justify 要想有两端对齐的效果，需
要满足两点：一是有分隔点，如空格；二是要超过一行*/
        }
        /*如何要兼容 ie7就不要用伪元素，用dom元素代替*/
      /*  .box:before {
            content: "";
            display: inline-block;
            height: 100%;
            
        }*/
        .box:after {
            content: "";
            display: inline-block;
            width: 100%;
            /*这个为满足text-align:justify要超过一行的要求*/
        }
        .bar {
            display: inline-block;
            width: 20px; height: 100px;
            background: red;
        }

html:

<!--第一个i标签前面千万不要有空格或者回车，空格和回车就是占用空白的位置，如果采用before底部对齐时会出现空白-->
<div id="box" class="box"><i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
</div>

• 但是当里面的i个数太多，就会换行，就导致换行的那几个个i就会在新的一行左右对齐分布，解决的方法是在最后一个i后面补上几个i，这个个数加上换行的i的个数要等于第一行i的个数，见代码
  • css

      .bar {
          display: inline-block;
          width: 20%;
          height: 100px;
          background: red;
          margin-right: 10px;
      }
      .place{
          display: inline-block;
          width: 20%;
          vertical-align: bottom;
          margin-right: 10px; 
      }
  

  • html ，第一行有4个i，第二行有三个，所以只需要补一个

  	<div id="box" class="box">
  		<i class="bar"></i>
  		<i class="bar"></i>
  		<i class="bar"></i>
  		<i class="bar"></i>
  		<i class="bar"></i>
  		<i class="bar"></i>
  		<i class="bar"></i>
  		<span class="place"></span>
  	</div>
  

转载于:https://my.oschina.net/u/3407699/blog/3034619