Выравнивание элементов на основе доступности заголовков в 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 без позиционирования. Fiddle ссылка here

Заранее спасибо

Answer 1

Решение простое: https://jsfiddle.net/45kuucbn/1/

Добавить поверочного тег вокруг заголовка, если присутствует использование +, чтобы добавить стиль к группе кнопок.

<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>