html - 当窗口大小更改时，如何使多个 div 宽度动态变化而不重叠

Question

我有一个包含三个宽度不同的 div 的 div。当我的窗口大小改变时，它相互重叠。当窗口大小改变时，如何使内容保持不重叠。这是我的代码。

#topBarContainer{
   background-color: blue; 
}

#topBarLeft{
    width: 14%;
    text-align: center;
}
#topBarMiddle{
    width: 26%;    
    text-align: center;
}
#topBarRight{
    width: 60%;
    text-align: right;
}
.topBar {
  margin-right: -4px;
  text-align: center;
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 3px;
}

<div id="topBarContainer">
    <!--TopBar-->
    <div id="topBarLeft" class="topBar">
        <input type="button" ng-click="newMenuType('message')"  value="New" id="newButton">     
    </div>
    <!--Top Bar Middle-->
    <div id="topBarMiddle" class="topBar">
        <div class="searchBoxContainer">
        <i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon">&nbsp;</i>
        <input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
        </div>          
    </div>
    <!--Top Bar Right-->
    <div id="topBarRight" class="topBar">
        <div>   
            <div class="loginRow">Hi{{loginName()}}</div> 
            <div ng-if="emailIcon()"  class="iconRow">
                <i class="fa fa-reply"></i>
            </div>
            <div ng-if="emailIcon()" class="iconRow">
                <i class="fa fa-reply-all"></i>
            </div>
            <div ng-if="emailIcon()"  class="iconRow" >
                <i class="fa fa-reply fa-flip-horizontal"></i>
            </div>
            <div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
                <i class="fa fa-trash"></i>            
            </div>
        </div>
    </div>
</div>  

当我调整窗口大小时，正常窗口看起来不错，它与所有重叠。左栏占 14%，中间栏占 26%，其余部分用于右侧容器。我花了几天时间来解决这个问题。我需要对齐所有部分，以便所有 3 个部分显示在同一行中。

Answer 1

您可以使用 flexbox 中的 display:flex

body {
  margin: 0
}
#topBarContainer {
  background-color: blue;
  display: flex;
}
#topBarLeft {
  width: 14%;
  text-align: center;
}
#topBarMiddle {
  text-align: center;
  background: red;
  width: 35%
}
#topBarRight {
  text-align: right;
  background: green;
  flex: 1
}
#topBarRight > div {
  display: inline-flex
}
.topBar {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 3px;
}
#topBarRight >div:last-of-type {
  text-align: center
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id="topBarContainer">
  <!--TopBar-->
  <div id="topBarLeft" class="topBar">
    <input type="button" ng-click="newMenuType('message')" value="New" id="newButton">
  </div>
  <!--Top Bar Middle-->
  <div id="topBarMiddle" class="topBar">
    <div class="searchBoxContainer">
      <i class="fa fa-search fa-flip-horizontal" id="searchBoxIcon">&nbsp;</i>
      <input type="text" placeholder="Search Inbox" class="searchBox" ng-model="searchEmail" />
    </div>
  </div>
  <!--Top Bar Right-->
  <div id="topBarRight" class="topBar">
    <div>
      <div class="loginRow">Hi{{loginName()}}</div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply"></i>
      </div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply-all"></i>
      </div>
      <div ng-if="emailIcon()" class="iconRow">
        <i class="fa fa-reply fa-flip-horizontal"></i>
      </div>
      <div ng-if="!isDeletedView() && emailIcon()" class="iconRow">
        <i class="fa fa-trash"></i> 
      </div>
      <div ng-show="canMoveToFolder()" class="iconRow" ng-mouseover="newIcon = true" ng-mouseleave="newIcon = false"> <i class="fa fa-folder-o"> </i> 
        <div ng-if="newIcon" id="newItemOptions">
          <label class='newItemLabel' ng-click="moveMessageToFolder(3)">Inbox</label>
          <label class='newItemLabel' ng-click="moveMessageToFolder(4)">Sent</label>
        </div>
      </div>
    </div>
  </div>
</div>