Question

我创建了一个面板，如下面的屏幕截图所示。我的面板将有一个标题标题和不同的图标，执行各种操作。这些标题标题和图标都是可选的，换句话说，在许多情况下，任何一个都不可用。

每当我拥有头衔时，我希望我的所有图标都位于面板标题的最右侧，这样可以正常工作，就像在我编写的CSS的第一个屏幕截图中一样。
当我没有标题时，我希望我的所有图标都位于面板标题的最左侧，如第二个屏幕截图所示，我面临着难以实现的目标。

截图

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

如果您可以稍微更改HTML以添加额外的元素，您可以使用：empty来根据具有内容的范围来定位它，或者不使用下一个兄弟选择器。

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

解决方案很简单：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 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>

根据CSS

3 个答案: