爲什麼浮動移動我的按鈕

Question

我有我的div內浮動按鈕的問題。當我設置按鈕float屬性，它不僅移動左/右，但略有改變位置和向上移動這不是我想要的......

這裏是我工作的

http://jsfiddle.net/o1u1cLbm/2/

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'> 
<div style="background-color:blue"> 
    <h1> 
    Some header text 
    </h1> 
</div> 
<div style='flex:1;background-color:red'> 
    <div style='display:block; vertical-align:middle'> 
    <button style="height:24px;"> 
     Some stuff 
     </button> 
    <button style="height:40px"> 
     Other stuff 
    </button> 
    </div> 

</div> 

的按鈕必須在容器中標題文本後將增長到最大空間。現在，我想第一個小按鈕，接近冠軍，並在右側的大個這樣

http://jsfiddle.net/o1u1cLbm/3/

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'> 
    <div style="background-color:blue"> 
     <h1> 
     Some header text 
     </h1> 
    </div> 
    <div style='flex:1;background-color:red'> 
     <div style='display:block; vertical-align:middle'> 
     <button style="height:24px;float:left"> 
      Some stuff 
      </button> 
     <button style="height:40px;float:right"> 
      Other stuff 
     </button> 
     </div> 

    </div> 
</div> 

正如你可以看到後我加入float屬性的按鈕，它是不再以父div爲中心，而是依附於頂層。

如何浮動按鈕而不改變它們的垂直位置只有CSS？

Answer 1

沒有必要floats，您可以使用flexbox，然後使用margin-left:auto持續flex-item

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'> 
 
    <div style="background-color:blue"> 
 
     <h1> 
 
     Some header text 
 
     </h1> 
 
    </div> 
 
    <div style='flex:1;background-color:red'> 
 
     <div style='display:flex;align-items:center;'> 
 
     <button style="height:24px;"> 
 
      Some stuff 
 
      </button> 
 
     <button style="height:40px;margin-left:auto;"> 
 
      Other stuff 
 
     </button> 
 
     </div> 
 
     
 
    </div> 
 
</div>

或者你可以使用justify-content: space-between;to flex-container

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'> 
 
    <div style="background-color:blue"> 
 
    <h1> 
 
     Some header text 
 
    </h1> 
 
    </div> 
 
    <div style='flex:1;background-color:red'> 
 
    <div style='display: flex;width: 100%;justify-content: space-between;align-items: center;'> 
 
     <button style="height:24px;"> 
 
      Some stuff 
 
      </button> 
 
     <button style="height:40px;margin-left:auto;"> 
 
      Other stuff 
 
     </button> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 2

如果使用display: flax;不需要使用漂浮在亞麻有原生解決方案here你可以在JS小提琴找到解決

Answer 3

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'> 
 
    <div style="background-color:blue"> 
 
     <h1> 
 
     Some header text 
 
     </h1> 
 
    </div> 
 
    <div style='flex:1;background-color:red'> 
 
     <div style='display: flex; align-items: center; justify-content: space-between;'> 
 
     <button style="height:24px;"> 
 
      Some stuff 
 
      </button> 
 
     <button style="height:40px;"> 
 
      Other stuff 
 
     </button> 
 
     </div> 
 
     
 
    </div> 
 
</div>

Answer 4

而不是inline-block只是讓你div Flex容器：

display: flex; 
align-items: center; 
justify-content: space-between; 

justify-content: space-between讓你浮動的效果 - 見下面的演示：

<div id='wrapper' style='display:flex; height:88px;align-items:center;text-align: center;background-color:yellow'> 
 
    <div style="background-color:blue"> 
 
    <h1> 
 
     Some header text 
 
    </h1> 
 
    </div> 
 
    <div style='flex:1;background-color:red'> 
 
    <div style='display: flex; 
 
    align-items: center; 
 
    justify-content: space-between;'> 
 
     <button style="height:24px;"> 
 
      Some stuff 
 
      </button> 
 
     <button style="height:40px"> 
 
      Other stuff 
 
     </button> 
 
    </div> 
 

 
    </div> 
 
</div>