HTML 灵活布局（display: flex）

display: flex

讲解

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

  .text1
 {
       display: 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

实例，实现下图

 <div class="text1">
        <div class="left">
                hello!
        div>
        
        <div class="right">
                world!
        div>
 div>
1
2
3
4
5
6
7
8
9

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28