CSS 定位问题：想要 Table 定位到 TOP

Question

我希望右侧 Table 触及顶部

我的标记和 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; 仍然在表格下方。帮助达到 table 到顶部。

Answer 1

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

当您将每个 div 的宽度设置为 49% 时，您会忘记 10px padding 来解决这个问题，并且使填充考虑给定的宽度
只需将 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>

CSS 定位问题：想要 Table 定位到 TOP

CSS Position Problem : Want the Table to position to TOP

css

position

html-table

css-float

我的标记和 css