如何将文本定位到与另一个Div右漂浮的Div的底部

Question

我有一个 parentdiv，内部有两个div，一个div是 floated left，另一个div是 floated right。

这就是我现在所拥有的：

┌─────────────┬─────────────┐
│  Text left  │ Text right  │
│  Text left  │─────────────┘
│  Text left  │             
│  Text left  │  
└─────────────┘

这就是我想要的：

┌─────────────┬─────────────┐
│  Text left  │             │
│  Text left  │             │
│  Text left  │             │ 
│  Text left  │ Text right  │ 
└─────────────┴─────────────┘

那是我的html：

<div style="position:absolute">
    <div style="float:left">
        Text left
        Text left
        Text left
        Text left
    </div>
    <div style="float:right;">
        Text right
    </div>
</div> 

基本上，我想要在Div底部显示的Text right。这样做的最好方法是什么？

Answer 1

flexbox 可以做到。

要做的第一件事是均衡两个孩子的高度，而flexbox则在中。

。

那么，将孩子设置在列中并使用justify-content将右手孩子的内容发送到底部是问题。

.left,
.right {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  padding: 1em 1em 0 1em
}
.parent {
  display: flex;
}
.right {
  justify-content: flex-end;
}

<div class="parent">
  <div class="left">
    <p>Text left</p>
    <p>Text left</p>
    <p>Text left</p>
    <p>Text left</p>
  </div>
  <div class="right">
    <p>Text left</p>
  </div>

Answer 2

解决此问题的各种选项：

首先，使用" display：inline-block;垂直隔离：底部；"；CSS属性

完成代码：

<div style="position:absolute">
    <div style="display: inline-block; vertical-align: bottom;">
        Text left<br>
        Text left<br>
        Text left<br>
        Text left<br>
    </div>
    <div style="display: inline-block; vertical-align: bottom;">
        Text right
    </div>
</div> 

Answer 3

我的代码

td {
    border-right: 1px dotted #000000 !important;
}

<div class="container" style="position: absolute;">        
  <table cellpadding="4" cellspacing="0" style="border:1px dotted;">
    <tbody>
      <tr>
        <td>Text left</td>
		
      </tr>
      <tr>
        <td>Text left</td>
      </tr>
      <tr>
        <td>Text left</td>
		<td rowspan="3" align="bottom;">Text right</td>
      </tr>
    </tbody>
  </table>
</div>