text-align ne fonctionne pas comme prévu

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

Question

Je cherche à faire deux éléments sur les différents côtés de leur conteneur. Dans mon code actuel de ces deux éléments doivent être sur les côtés opposés d'une div, mais pour le bien de l'exemple, permet de dire que je veux les sur les côtés opposés de la fenêtre du navigateur.

Je l'ai fait simple: 

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

Exemple à: http://jsbin.com/ocete/

Eh bien, je ne suis pas entièrement sûr comment faire cela très bien avec divs même. De plus dans la cellule du tableau aligné à droite, il y aura deux éléments dans mon code actuel. L'une est une image et on est un morceau de texte. Je veux qu'ils soient sur les côtés opposés de la <td> dans laquelle ils sont contenus.

Comment puis-je faire comme je le veux? Je ne vois aucune façon simple. (Et s'il vous plaît ne recommande pas le positionnement fixe)

Était-ce utile?

La solution

Pour votre élément <table>, ajouter: 

style="width: 100%"

Tout fonctionne parfaitement, votre table est tout simplement pas assez grand pour le voir.

Autres conseils

Si vous cherchez à mettre un côté image côte à côte avec le texte sur les côtés séparés d'une table, vous pouvez utiliser les éléments suivants: 

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

Cela devrait vous faire quelque chose comme 

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

Vous ne disposez pas d'une largeur spécifiée pour votre table, il est donc aussi large que doit être, par conséquent, vous ne pouvez pas voir l'alignement du texte faisant une différence.

Essayer cette 

<table style="width: 100%">

et prendre un autre regard.

Toute raison d'utiliser une table pour la mise en page? Utiliser deux divs place, mettre leur largeur à 50% chacune, et la seconde flotter div vers la droite.

Ajouter une largeur à votre table .. 

<table style="width: 100%">

Edit: lent tooo

Vous allez toujours à l'aide d'une table? Dans ce cas les réponses ci-dessus fonctionneront. Mais si vous utilisez deux divs dans un conteneur div, vous devez flotter à l'intérieur des divs à gauche et à droite respectivement, puis effacer vos flotteurs dans le conteneur div.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top