Question

我有一个parent div和两个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将右手孩子的内容发送到底部。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

解决此问题的各种选项：

首先，使用＆＃34; display：inline-block; vertical-align：bottom;＆＃34; 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>

如何将文本定位到与另一个div一起浮动的div的底部

3 个答案: