テーブルの部門

Question

私は少し問題があります。それは愚かかもしれないが、私はそれを解決することはできません。私はテーブルを持っています。そしてその中に、列の名前と次の2つの矢印の文字列を並べ替えたいと思います。私はフロートをしようとしました：左が反応しません。

 <tr> 
      <th > 
      <div> 
       <div class='columnName'>Column name</div> 
          <div class='arrows'> 
           <div class="arrow-up-icon"></div> 
           <div class="arrow-down-icon"></div> 
          </div> 
      </div> 
      </th> 
     </tr> 

そして、ここでは私のCSSです：

.arrow-up-icon { 
    background-image: url('here url code'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    top: 50%; 
    transform: translateY(-50%); 
    height: 20px; 
    width: 20px; 
    float: left; 
    cursor: pointer; 
    border:1px solid red; 
} 

.arrow-down-icon { 
    background-image: url(''); 
    background-size: contain; 
    background-repeat: no-repeat; 
    top: 50%; 
    transform: translateY(-50%); 
    height: 20px; 
    width: 20px; 
    float: left; 
    cursor: pointer; 
    border:1px solid black; 
} 

.columnName { 
    float: left; 
} 

.arrows { 
    float: left; 
} 

Answer 1

.arrow-up-icon { 
 
    cursor: pointer; 
 
    float: left; 
 
} 
 

 
.arrow-up-icon:before { 
 
    content: '↑'; 
 
} 
 

 
.arrow-down-icon { 
 
    cursor: pointer; 
 
    float: right; 
 
} 
 

 
.arrow-down-icon:before { 
 
    content:'↓'; 
 
} 
 

 
.columnName, .arrows { 
 
    display: inline; 
 
    float: left; 
 
}

 <table> 
 
     
 
     <tr> 
 
      <th > 
 
      <div> 
 
       <div class='columnName'>Column name</div> 
 
          <div class='arrows'> 
 
           <div class="arrow-up-icon"></div> 
 
           <div class="arrow-down-icon"></div> 
 
          </div> 
 
      </div> 
 
      </th> 
 
     </tr> 
 
     </table>

Answer 2

使用私は.arrows

display: flex; 
flex-direction: column; 

に次の cssを追加しましたあなたの css

でflexbox性質今私のコードは次のようになります

ここに完成ですflexbox propertiesに導く：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.arrow-up-icon { 
 
    background-image: url('here url code'); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    height: 20px; 
 
    width: 20px; 
 
    float: left; 
 
    cursor: pointer; 
 
    border:1px solid red; 
 
} 
 

 
.arrow-down-icon { 
 
    background-image: url(''); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
    height: 20px; 
 
    width: 20px; 
 
    float: left; 
 
    cursor: pointer; 
 
    border:1px solid black; 
 
} 
 

 
.columnName { 
 
    float: left; 
 
} 
 

 
.arrows { 
 
    float: left; 
 
    
 
    display: flex; 
 
    flex-direction: column; 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th > 
 
     <div> 
 
      <div class='columnName'>Column name</div> 
 
         <div class='arrows'> 
 
          <div class="arrow-up-icon"></div> 
 
          <div class="arrow-down-icon"></div> 
 
         </div> 
 
     </div> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 

 
</table>