Wie man Text nach unten des Divs positioniert, das mit einem anderen div schwebte

Question

Ich habe ein parent div und zwei divs innen, ein div ist floated left und ein anderes div ist floated right.

Das ist, was ich jetzt habe:

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

Das ist, was ich will:

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

Das ist mein 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> 

Grundsätzlich möchte ich Text right angezeigt in der Unterseite des div. Was ist der beste Weg, das zu tun?

Answer 1

Flexbox kann das tun.

Das erste, was zu tun ist, gleicht die Höhen der beiden Kinder und flexbox macht das aus der Box.

Dann ist es wichtig, die untergeordneten Elemente in einer Spalte anzuzeigen und justify-content zu verwenden, um den Inhalt des rechten untergeordneten Elements nach unten zu senden.

.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

Verschiedene Option, um dieses Problem zu lösen:

Verwenden Sie zuerst "display: inline-block; vertical-align: bottom;" CSS-Eigenschaft

komplette Code:

<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

My-Code hier

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> 
 
\t \t 
 
     </tr> 
 
     <tr> 
 
     <td>Text left</td> 
 
     </tr> 
 
     <tr> 
 
     <td>Text left</td> 
 
\t \t <td rowspan="3" align="bottom;">Text right</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>