根據CSS中的標題可用性對齊項目

Question

我已經創建了一個面板，如下面的截圖所示。我的面板將有一個標題標題和執行各種操作的不同圖標。這兩個標題和圖標都是可選的，換句話說，在許多情況下，任何一個都不可用。

1. 只要我有標題，我希望我的所有圖標都處於面板標題的極端右側，這與我寫入的CSS的第一個屏幕截圖一樣正常工作。
2. 當我沒有標題時，我希望所有圖標都位於面板標題的最左側，如第二個截圖所示，這是我面臨的難題。

SCREENSHOTS

HTML

<div class="panel"> 
     <div class="panel-header ">Title Goes Here 
      <div class="toolbar-button-group"> 
       <button class="toolbar-button-stroke icon-add"></button> 
       <button class="toolbar-button-stroke icon-hide"></button> 
       <button class="toolbar-button-stroke icon-edit"></button> 
       <button class="toolbar-button-stroke icon-options"></button> 
      </div> 
     </div> 
     <div class="panel-content "></div> 
    </div> 

CSS

.panel { 
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); 
    background: #fff; 
    width: 100%; 
    height: 100%; 
    } 
    .panel-header { 
    color: #354052; 
    text-transform: capitalize; 
    font-size: 20px; 
    height: 40px; 
    line-height: 40px; 
    margin: 0; 
    padding-left: 24px; 
    border-bottom: 2px #BBBBBB solid; 
    } 
    .panel-content { 
    padding: 24px; 
    background: white; 
    } 
    .toolbar-button-stroke{  
     background:white; 
     border: none; 
     border-radius: 4px; 
     padding: 6px; 
     margin: 0px 3px; 
     color:black; 
     font-size: 15px; 
     text-transform: uppercase; 
     cursor:pointer; 
     outline: none; 
    } 
    .toolbar-button-group{ 
     float: right; 
    } 

我更喜歡帶有定位的CSS解決方案。小提琴鏈接here

在此先感謝

Answer 1

解決方法很簡單：https://jsfiddle.net/45kuucbn/1/

添加span標籤在你的標題，如果存在使用+添加樣式按鈕組。

<div class="panel"> 
     <div class="panel-header "> 
      <span>Title Goes Here</span> 
      <div class="toolbar-button-group"> 
       <button class="toolbar-button-stroke icon-add">a</button> 
       <button class="toolbar-button-stroke icon-hide">a</button> 
       <button class="toolbar-button-stroke icon-edit">a</button> 
       <button class="toolbar-button-stroke icon-options">a</button> 
      </div> 
     </div> 
     <div class="panel-content "></div> 
    </div> 



    <div class="panel"> 
     <div class="panel-header "> 

      <div class="toolbar-button-group"> 
       <button class="toolbar-button-stroke icon-add">a</button> 
       <button class="toolbar-button-stroke icon-hide">a</button> 
       <button class="toolbar-button-stroke icon-edit">a</button> 
       <button class="toolbar-button-stroke icon-options">a</button> 
      </div> 
     </div> 
     <div class="panel-content "></div> 
    </div> 



.panel { 
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); 
    background: #fff; 
    width: 100%; 
    height: 100%; 
    } 
    .panel-header { 
    color: #354052; 
    text-transform: capitalize; 
    font-size: 20px; 
    height: 40px; 
    line-height: 40px; 
    margin: 0; 
    padding-left: 24px; 
    border-bottom: 2px #BBBBBB solid; 
    } 
    .panel-content { 
    padding: 24px; 
    background: white; 
    } 
    .toolbar-button-stroke{  
     background:white; 
     border: none; 
     border-radius: 4px; 
     padding: 6px; 
     margin: 0px 3px; 
     color:black; 
     font-size: 15px; 
     text-transform: uppercase; 
     cursor:pointer; 
     outline: none; 
    } 
    .toolbar-button-group{ 
     display:inline-block; 
    } 

    .panel-header span + .toolbar-button-group { 
    float:right; 
    } 

Answer 2

如果你可以改變張望了一下自己的HTML中添加一個額外的元素，你可以使用：空基於其內容或無法與一個同級選擇跨度上瞄準它。

.panel { 
 
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.23), 0 3px 12px rgba(0, 0, 0, 0.16); 
 
    background: #fff; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.panel-header { 
 
    color: #354052; 
 
    text-transform: capitalize; 
 
    font-size: 20px; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    margin: 0; 
 
    padding-left: 24px; 
 
    border-bottom: 2px #BBBBBB solid; 
 
} 
 
.panel-content { 
 
    padding: 24px; 
 
    background: white; 
 
} 
 
.toolbar-button-stroke { 
 
    background: white; 
 
    border: none; 
 
    border-radius: 4px; 
 
    padding: 6px; 
 
    margin: 0px 3px; 
 
    color: black; 
 
    font-size: 15px; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
    outline: none; 
 
} 
 
.toolbar-button-group { 
 
    float: right; 
 
} 
 

 
span:empty + .toolbar-button-group { 
 
    float: left; 
 
}

<div class="panel"> 
 
    <div class="panel-header "><span>Title Goes Here</span> 
 
    <div class="toolbar-button-group"> 
 
     <button class="toolbar-button-stroke icon-add">A</button> 
 
     <button class="toolbar-button-stroke icon-hide">B</button> 
 
     <button class="toolbar-button-stroke icon-edit">C</button> 
 
     <button class="toolbar-button-stroke icon-options">D</button> 
 
    </div> 
 
    </div> 
 
    <div class="panel-content "></div> 
 
</div> 
 

 
<br/> 
 

 
<div class="panel"> 
 
    <div class="panel-header "><span></span> 
 
    <div class="toolbar-button-group"> 
 
     <button class="toolbar-button-stroke icon-add">A</button> 
 
     <button class="toolbar-button-stroke icon-hide">B</button> 
 
     <button class="toolbar-button-stroke icon-edit">C</button> 
 
     <button class="toolbar-button-stroke icon-options">D</button> 
 
    </div> 
 
    </div> 
 
    <div class="panel-content "></div> 
 
</div>

Answer 3

當文字heading塊的代碼工作像你想

here is codepen.io live example

if($('.left').is(':empty')) { 
 
    $('.right').addClass('full'); 
 
    $('.left').addClass('hidden'); 
 
}

.title-container { 
 
    width: 300px; 
 
    margin: 100px auto; 
 
    outline: 1px solid #333; 
 
    padding: 15px 25px; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 12px; 
 
} 
 
.title-container .col-2 { 
 
    width: 50%; 
 
    float: left; 
 
    outline: 1px solid #ccc; 
 
    padding: 5px; 
 
    box-sizing: border-box; 
 
} 
 
.title-container .hidden { 
 
    display: none; 
 
} 
 
.title-container .icon { 
 
    display: inline-block; 
 
    outline: 1px solid #ccc; 
 
    width: 20px; 
 
    text-align: center; 
 
} 
 
.title-container .right { 
 
    text-align: right; 
 
} 
 
.title-container .full { 
 
    width: 100%; 
 
} 
 
.title-container .full.right { 
 
    text-align: left; 
 
} 
 
.title-container::after { 
 
    display: table; 
 
    content: ""; 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="title-container"> 
 
    <div class="col-2 left heading">Delete me and see result</div> <!-- heading block--> 
 
    <div class="col-2 right icons">   <!-- icons block --> 
 
    <span class="icon">1</span> 
 
    <span class="icon">2</span> 
 
    <span class="icon">3</span> 
 
    </div> 
 
</div>