CSS 定位问题：希望表格定位到 TOP答案

【问题标题】：CSS Position Problem : Want the Table to position to TOPCSS 定位问题：希望表格定位到 TOP
【发布时间】：2021-04-05 07:39:54
【问题描述】：

我希望右侧的表格触顶

我的标记和 CSS

.leftDev {
  float: left;
  width: 49%;
  padding: 10px;
}

.vl {
  border-left: 4px solid blue;
  position: absolute;
  height: 100%;
  float: center;
  left: 50%;
  top: 0;
  height: 100%;
}

.rightDev {
  height: 100%;
  top: 0%;
  float: right;
  width: 49%;
  padding: 10px;
  margin-left: auto;
}

<div class="leftDev"></div>
<div class="vl"></div>
<div class="rightDev "></div>

我保留了top:0;，它仍然在表格下方。帮助到达桌子顶部。

【问题讨论】：

能否提供html和css的完整代码？
leftDev 包含表单。 VL = 垂直线。 rightDev 包含表
我真的很想帮助您解决问题，但您提供的代码仍然不足以重现问题。
如果您尝试仅使用您提供的代码，并添加一个简单的表格和边框 = 2 的表格，也许您将能够理解为什么表格在中间。
我添加了，但它说“看起来您的帖子主要是代码；请添加更多详细信息。”

标签： css html-table position css-float

【解决方案1】：

问题是因为您的.leftDev、.vl 和.rightDev 的宽度超过了100%，因此.rightDev 将在新行中呈现......

当您将每个 div 的宽度设置为 49% 时，您会忘记使用 10px 填充 来解决此问题并使填充考虑给定宽度
只需将box-sizing: border-box; 添加到.leftDev 和.rightDev

.leftDev {
  float: left;
  width: 49%;
  padding: 10px;
  box-sizing: border-box;
  background:black;
}

.vl {
  border-left: 4px solid blue;
  position: absolute;
  height: 100%;
  float: center;
  left: 50%;
  top: 0;
  height: 100%;
}

.rightDev {
  height: 100%;
  top: 0%;
  float: right;
  width: 49%;
  padding: 10px;
  margin-left: auto;
  box-sizing: border-box;
  background:yellow;
}

<div class="leftDev"></div>
<div class="vl"></div>
<div class="rightDev "></div>

【讨论】：

框大小：边框框；