Question

我正在尝试为项目设计布局。我有两个div容器（leftnav和rightnav）左右浮动。我必须把中心部分分成两部分。＆＃34; Mailbar＆＃34;是中部地区的上层。问题是将边框应用于＆＃34; mailbar＆＃34; div与浮动div重叠。我想防止它重叠。

＆＃13;

#main {
  margin: 0px;
  height: 150px;
  border: 1px solid black;
}
#leftbar {
  float: left;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid black;
}
#rightbar {
  float: right;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid black;
}
#mailbar {
  width: 100%;
  height: 50%;
  border-bottom: 1px solid black;
}

＆＃13;

<body>
  <div id="main">
    <div id="leftbar"> </div>

    <div id="rightbar"> </div>

    <div id="mailbar"> </div>
  </div>
</body>

＆＃13;

Answer 1

您可以使用％来定义navbars的宽度，然后将剩余的％定义为mailbar，并将左navbar的宽度添加到mailbar为{{ 1}}。

例如：

https://jsfiddle.net/3jjpasum/2/

margin-left

Answer 2

删除width: 100%;并为overflow: auto;添加#mailbar。

#main {
  margin: 0px;
  height: 150px;
  border: 1px solid black;
}
#leftbar {
  float: left;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid black;
}
#rightbar {
  float: right;
  width: 250px;
  height: 100%;
  overflow-y: auto;
  border-left: 1px solid black;
}
#mailbar {
  /*width: 100%;*/
  height: 50%;
  border-bottom: 1px solid black;
overflow: auto;
}

<body>
  <div id="main">
<div id="leftbar"> </div>

<div id="rightbar"> </div>

<div id="mailbar"> </div>
  </div>
</body>

Answer 3

尝试这样：对{div}使用box-sizing:border-box;; 和calc为中间div

 #main {
      margin: 0px;
      height: 150px;
      border: 1px solid black;
    }
    #leftbar {
      float: left;
      width: 250px;
      height: 100%;
      overflow-y: auto;
      border-right: 1px solid black;
      box-sizing:border-box;
    }
    #rightbar {
      float: right;
      width: 250px;
      height: 100%;
      overflow-y: auto;
      border-left: 1px solid black;
      box-sizing:border-box;
    }
    #mailbar {
      width: calc(100% - 500px);
      float:left;
      height: 50%;
      border-bottom: 1px solid black;
      box-sizing:border-box;
    }

Answer 4

如果你有固定容器，就像这种情况一样。你可以只使用绝对位置。

见下面的例子。

＆＃13;

#main {
	margin:0px;
	height:150px;
        position:relative;
	border:1px solid black;
}
#leftbar {
	float:left;
	width:250px;
	height:100%;
        position:absolute;
        left:0;
        top:0;
	overflow-y: auto;
	border-right: 1px solid black;
}

#rightbar {
	width:250px;
	height:100%;
        position:absolute;
        right:0;
        top:0;
	overflow-y: auto;
	border-left: 1px solid black;

}
#mailbar {
   
        left:250px;
        right:250px;
	position:absolute;
        border-bottom:1px solid #000;
        height:50%;
}

＆＃13;

<body>
<div id = "main">
<div id = "leftbar">
</div>

<div id = "rightbar">
</div>
<div id="mailbar"></div>
</div>
</body>

＆＃13;

Div边框与float元素重叠

4 个答案: