выравнивание текста не работает должным образом
-
18-09-2019 - |
Вопрос
Я пытаюсь создать два элемента на разных сторонах контейнера.В моем реальном коде эти два элемента должны находиться на противоположных сторонах элемента 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.