Div边框与浮动元素重叠

Question

Div边框与浮动元素重叠

4

我正在设计一个项目的布局。我有两个div容器（leftnav和rightnav），它们分别浮动在左侧和右侧。我要将中心部分分成两部分。“Mailbar”是该中心区域的上部div。问题在于，将边框应用于“mailbar” div会与浮动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;
}
#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;
}

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

    <div id="rightbar"> </div>

    <div id="mailbar"> </div>
  </div>
</body>

- Shivam Mitra

@troyer 这会怎么工作？他使用了浮点数而不是位置。 - priya_singh

你能在你的代码片段中展示出这个问题吗？ - connexo

1

为什么不试试用%？:) 看这里：https://jsfiddle.net/3jjpasum/2/ - Troyer

同意@Troyer的观点，如果使用固定像素大小，您的设计在所有浏览器中都不会完美。 - Kirankumar Dafda

@Troyer 这是一个不错的主意，可以尝试调整宽度和边距。谢谢 :) - Shivam Mitra

4个回答

2

您可以使用百分比来定义 navbars 的宽度，然后将剩余的百分比分配给 mailbar，并将左侧 navbar 的宽度添加到 mailbar 作为 margin-left。

例如： https://jsfiddle.net/3jjpasum/2/

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

#rightbar {
    float:right;
    width:15%;
    height:100%;
    overflow-y: auto;
    border-left: 1px solid black;
}
#mailbar {
  margin-left: 15%;
    width:70%;
    height:50%;
  background-color: red;
    border-bottom: 1px solid black;
}

- Troyer

+1票赞成快速可靠的答案。但我仍然认为margin-left: 15%不如float: left;好。 - Kirankumar Dafda

谢谢@KirankumarDafda，float:left也可以完成工作，但我更喜欢侧边栏的确切百分比 :) - Troyer

是的，没错。每个开发者都有自己的选择和风格 :) - Kirankumar Dafda

0

如果你的容器是固定的，就像在这个例子中一样。你可以使用绝对定位。

请看下面的示例。

#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%;
}

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

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

- Maciej Paprocki

0

尝试这样做：对于子div使用box-sizing:border-box;; 对于中间的div使用calc

 #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;
    }

- vakho papidze

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix A J · Accepted Answer

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

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