выравнивание текста не работает должным образом

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

Вопрос

Я пытаюсь создать два элемента на разных сторонах контейнера.В моем реальном коде эти два элемента должны находиться на противоположных сторонах элемента div, но для примера предположим, что я хочу, чтобы они находились на противоположных сторонах окна браузера.

Поэтому я сделал просто:

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

Пример: http://jsbin.com/ocete/

Ну, я не совсем уверен, как это сделать даже с помощью div.Кроме того, в ячейке таблицы, выровненной по правому краю, в моем реальном коде будет два элемента.Один из них — изображение, другой — фрагмент текста.Я хочу, чтобы они были по разные стороны <td> в котором они содержатся.

Как я могу сделать это так, как хочу?Я не вижу прямого пути.(и, пожалуйста, не рекомендуйте фиксированное позиционирование)

Это было полезно?

Решение

На ваш <table> элемент, добавьте:

style="width: 100%"

Все работает отлично, просто ваш стол недостаточно велик, чтобы это увидеть.

Другие советы

Если вы хотите поместить изображение рядом с текстом на разных сторонах таблицы, вы можете использовать следующее:

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

Это должно дать вам что-то вроде

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

Для вашей таблицы не указана ширина, поэтому ее ширина равна необходимой, поэтому вы не видите, что выравнивание текста имеет какое-либо значение.

Попробуй это

<table style="width: 100%">

и взгляните еще раз.

Есть ли причина использовать таблицу для макета?Используйте два divвместо этого установите ширину каждого из них на 50 % и разместите второй div Направо.

Добавьте ширину к вашей таблице.

<table style="width: 100%">

Редактировать:слишком медленно

Вы всегда будете пользоваться столом?Если да, то приведенные выше ответы будут работать.Но если вы используете два элемента div внутри контейнера div, вам нужно сместить внутренние элементы div влево и вправо соответственно, а затем очистить элементы с плавающей запятой в контейнере div.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top