text-align funktioniert nicht wie erwartet

StackOverflow https://stackoverflow.com/questions/1881881

Frage

Ich versuche, zwei Elemente auf verschiedenen Seiten ihres Behälter zu machen. In meinem eigentlichen Code sind diese beiden Elemente auf gegenüberliegenden Seiten eines div sein, aber im Interesse des Beispiels können, sagen ich sie will auf gegenüberliegenden Seiten des Browserfensters.

Also habe ich einfach: 

<html>
<head>
</head>
<body>
<table>
<tr>
<td style="width: 50%;text-align: left;">
This should go left
</td>
<td style="width: 50%;text-align: right;">
This should go right
</td>
</tr>
</table>
</body>
</html>

Beispiel an: http://jsbin.com/ocete/

Nun, ich bin nicht ganz sicher, wie dies mit divs auch sehr gut zu tun. Auch in rechts ausgerichtet Tabellenzelle, wird es zwei Elemente in meinem eigentlichen Code. Eine davon ist ein Bild und man ist ein Stück Text. Ich möchte, dass sie auf gegenüberliegenden Seiten des <td> sein, in denen sie enthalten sind.

Wie kann ich dies tun, wie ich will? Ich bin nicht gerade nach vorne Art und Weise zu sehen. (Und bitte nicht empfohlen, feste Positionierung)

War es hilfreich?

Lösung

Um Ihre <table> Element hinzu: 

style="width: 100%"

Alles funktioniert perfekt, Ihr Tisch einfach nicht groß genug ist, um es zu sehen.

Andere Tipps

Wenn Sie schauen, um ein Bild Seite an Seite mit Text auf separaten Seiten einer Tabelle setzen Sie folgende verwenden können: 

<table style="width: 100%">
<tr>
<td style="text-alight: left;">
text
</td>
<td style="text-align: right;">
  <table style="width: 100%">
    <tr>
      <td style="text-align: left;">image</td>
      <td style="text-align: right;">text</td>
    </tr>
  </table>
</td>
</tr>
</table>

Das sollte man so etwas wie

erhalten 
-----------------------------
|text    |image    |    text|
-----------------------------

Sie haben noch eine Breite für die Tabelle angegeben, so dass es nur so breit ist, wie es sein muss, daher können Sie nicht die Textausrichtung sehen keinen Unterschied zu machen.

Versuchen Sie, diese 

<table style="width: 100%">

und einen anderen Blick nehmen.

Gibt es Gründe, eine Tabelle für das Layout zu verwenden? Verwenden Sie zwei divs stattdessen auf 50% setzen ihre Breite jeder, und schweben die zweite div nach rechts.

Fügen Sie eine Breite auf den Tisch .. 

<table style="width: 100%">

Edit: tooo Langsam

Wollen Sie immer einen Tisch zu verwenden? Wenn dies der Fall arbeitet die oben genannten Antworten. Aber wenn Sie mit zwei divs innerhalb eines div-Container, müssen Sie die Innenseite divs nach links schweben bzw. nach rechts und dann löschen Sie den Schwimmer im Behälter div.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top