Wie behalte ich den Inhalt sowohl in einzeiliger Form als auch in Ausrichtung nach unten?

Ich versuche, um diesen Zustand zu erhalten: Wie behalte ich den Inhalt sowohl in einzeiliger Form als auch in Ausrichtung nach unten?

rechts nach links Text auf der rechten Seite ausgerichtet ist, von links nach rechts Text auf der linken Seite ausgerichtet ist, während am Boden zu bleiben. Statt dessen erhalte ich:

Wenn ich versuche, einen relative-absolute solution zu verwenden, ich habe die einzeilige Ausrichtung des linken Blocks Inhalt ruinieren. Hier ist die HTML:

(btw: Ich bin mit Tisch wegen seiner Ordentlichkeit, ich bin offen für Nicht-Tisch-Lösungen ...)

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>title</title> 

     <link rel="stylesheet" type="text/css" href="main.css"/> 
    </head> 
    <body dir="rtl"> 
    <table> 
     <tr> 
      <td><h1>מימין לשמאל</h1></td> 
      <td class="ltr same-line-container"> 
       <span>left to right text</span> 
       <span style="border:1px solid black; margin-right: 2.5px;"/> 
       <span>123456789</span> 
      </td> 
     </tr> 
    </table> 
    <hr> 
    </div> 
    </body> 
</html>

CSS:

table{ width: 100%; } 
td { border: 0.5px solid red; } 
div{ border: 0.5px solid blue; } 
span{ border: 0.5px solid cyan; } 

.same-line-container span { 
    display:inline; 
} 

.bottom-content-container { 
    position:relative; 
} 

.bottom-content-container span { 
    position:absolute; 
} 

.rtl { direction: rtl; } 
.ltr { direction: ltr; } 
.right{ float: right; } 
.left{ float: left; }

Ich beginne zu wandern, ob ich JS als auch hinzufügen muss, um solche Probleme zu überwinden ...

Quelle

2016-05-16 Tar

Verwenden Sie vertical-align:bottom; auf dem td mit der Klasse same-line-container. Der Standardwert ist vertical-align:middle;, weshalb der Text nicht an der Unterseite des Containers positioniert ist.

table{ width: 100%; } 
 
td { border: 0.5px solid red; } 
 
div{ border: 0.5px solid blue; } 
 
span{ border: 0.5px solid cyan; } 
 
.same-line-container { 
 
    vertical-align:bottom; 
 
    } 
 
.same-line-container span { 
 
    display:inline; 
 
} 
 

 
.bottom-content-container { 
 
    position:relative; 
 
} 
 

 
.bottom-content-container span { 
 
    position:absolute; 
 
} 
 

 
.rtl { direction: rtl; } 
 
.ltr { direction: ltr; } 
 
.right{ float: right; } 
 
.left{ float: left; }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>title</title> 
 

 
     <link rel="stylesheet" type="text/css" href="main.css"/> 
 
    </head> 
 
    <body dir="rtl"> 
 
    <table> 
 
     <tr> 
 
      <td><h1>מימין לשמאל</h1></td> 
 
      <td class="ltr same-line-container"> 
 
       <span>left to right text</span> 
 
       <span style="border:1px solid black; margin-right: 2.5px;"/> 
 
       <span>123456789</span> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    <hr> 
 
    </div> 
 
    </body> 
 
</html>

Quelle

2016-05-16 14:11:06 Wowsk

Dank! Ist 'table' das richtige Werkzeug für den Job? – Tar

Ich würde persönlich Divs verwenden, aber wenn Sie Tabellen mögen, dann gehen Sie dafür! Könnten Sie akzeptieren, wenn Sie das Gefühl haben, dass dies Ihre Frage beantwortet? – Wowsk

Wie behalte ich den Inhalt sowohl in einzeiliger Form als auch in Ausrichtung nach unten?

Antwort

Verwandte Themen