如何在外部div的顶部获得内部div

Question

我遇到这种情况：

我希望右侧的桌子与左侧的表格高度相同。

这是我的CSS：

.left {
height: auto;
width: 550px;
}

.right {
height: auto;
width: 550px;
padding-left: 40px;
}

.innerRight {
height: auto;
}

.middle {
height: auto;
position:absolute;
left:50%;
top:17%;
bottom:15%;
border-left:1px solid grey;
}

.left, .right {
display: inline-block;
}

我该怎么做？

我使用浮动，但高度不会自动调整，所以我无法使用它。

Answer 1

您可以同时给他们position:absolute;，然后将它们放在顶部，左侧，右侧等位置。

Answer 2

如果没有您的实际HTML代码，这里有一个示例可以帮助您使用table-row，table-cell css属性。

＆＃13;

＆＃13;

.wrap {
  overflow: hidden;
  width: 250px;
  display: table;
  border-collapse: collapse;
}
.row {
  display: table-row;
}
.left {
  width: 50%;
  display: table-cell;
  background-color: yellow;
}
.middle {
  border-left: solid 1px red;
  width: 1px;
  display: table-cell;
}
.right {
  width: 50%;
  background-color: orange;
  display: table-cell;
}

＆＃13;

<div class="wrap">
  <div class="row">
    <div class="left">Lorem</div>
    <div class="middle"></div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      <br/>
      <br/>
      <br/>
      <br/>
      <br/>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;