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>

当我调整窗口大小时，正常窗口看起来很好，它重叠all.leftBar需要14％而中间栏需要26％并且正确的容器休息。我花了好几天来解决这个问题。我需要对齐所有，以便所有3个部分显示在同一行。

Answer 1

您可以使用display:flex

中的flexbox

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

我不确定它是否是您正在寻找的，但如果您将searchBoxContainer放入display：flex;它解决了问题因为它将你的searchBoxIcon放在searchBox之前它自己

你必须在你的CSS中使用

.searchBoxContainer{
  display:flex;
}

＆＃13;

#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;
}
.searchBoxContainer{
  display:flex;
}

＆＃13;

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

＆＃13;

Answer 3

为什么所有元素都在.topBar类的负边距上向右移动？我会删除它，然后将box-sizing: border-box;添加到.topBar（只是为了保证安全方面的百分比宽度和高度）。

所以你有

.topBar {
  box-sizing: border-box;
  text-align: center;
  display: inline-block;
  padding-top: 5px;
  padding-bottom: 3px;
}

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

3 个答案: