HTML 灵活布局（display: flex）

display: flex

讲解

想要实现这种效果，一行中，文字左右排布，同时文字的中间保持在一条水平线上

  .text1
 {
       display: flex;<!--布局格式为flex-->
       
       align-items: center; <!--子项目按照交叉轴的中点对齐-->
       justify-content: space-between; <!--两端对齐，项目之间的间隔都相等-->
                    
  }
  <div class="text1">
           <div style="border: 1px solid black; font-size:50px;">
                   hello!
           </div>
           <div style="border: 1px solid black; ">
                   world!
           </div>
  </div>

实例，实现下图

 <div class="text1">
        <div class="left">
                hello!
        </div>
        
        <div class="right">
                world!
        </div>
 </div>

<style>
                .text1
                {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    
                }
                .left
                {
                    width: 70%;
                    background-color: red;
                    text-align: center;
                    font-size: 28px;
                    
  					line-height: 50px; /*两个div如果想同一高度，按line-height设定，不要height，否则会如下图*/
                }
                .right
                {
                    
                    width: 30%;
                    background-color: yellow;
                    text-align: center;
                    font-size: 8px;
                    
                    line-height: 50px;   /*两个div如果想同一高度，按line-height设定，不要height，否则会如下图*/
                }
</style>