Как расположить виджеты в рядМногие начинающие веб-мастера рано или поздно сталкиваются с проблемой: решив разместить на своем сайте сторонние виджеты (кнопки "Нравится", "Рекомендую" от социальных сетей) - обнаруживают, что их невозможно выстроить в один ряд. То есть, любая информация, находящаяся в контейнере (
<div></div>,
<table></table> и т.д.) - не выстраивается в одну строчку.
Данную проблему можно решить довольно простым способом:
Код:
<table style="border-color: #ffffff; border-width: 0px;" border="0">
<tbody>
<tr>
<td style="width: 33%; border: 1px solid #ffffff;" align="center" valign="middle">p1</td>
<td style="width: 33%; border: 1px solid #ffffff;" align="center" valign="middle">p2</td>
<td style="width: 33%; border: 1px solid #ffffff;" align="center" valign="middle">р3</td>
</tr>
</tbody>
</table>
Это - код таблицы с тремя столбцами и одной строкой. В эти столбцы Вы можете разместить любую информацию в контейнере (например, виджет, или другую таблицу).
Теперь, давайте вместе разберемся: где здесь что. Итак, первая строчка кода
<table style="border-color: #ffffff; border-width: 0px;" border="0">То, что выделено - это цвет границы таблицы (рамочка). Если Вы не хотите, чтобы таблица была видна - пропишите ей цвет фона, на котором она размещается. В данном примере, цвет для рамки задан белый (
#ffffff, или
white).
Далее, мы видим теги -
<tbody> и
<tr>, первый отвечает за начало "тела" таблицы, второй - обозначает начало строки. Строка у нас всего одна, поэтому таких тегов в нашей таблице лишь два: один открывающий и один закрывающий. Тегов
<tbody> - также два: один в начале, другой в конце таблицы.
Ниже - следующая строка:
<td style="width: 33%; border: 1px solid #ffffff;" align="center" valign="middle">p1</td>.
Она дублируется три раза, потому, что у нас три столбца. Каждая строка - это один столбец.
Разбираем значения.
Width: 33% - это ширина одного столбца. Вы можете задать для нее любое значение, в процентах (
%), или в пикселях (
px).
Ниже, мы снова видим параметр цвета - это цвет собственной границы столбца.Делаем его таким же, как и цвет общей границы всей таблицы, и идем дальше. Следующая загвоздка -
p1. Этими двумя символами я обозначил то место в столбце, где будет находиться сама информация (текст, картинка, код виджета). Просто удаляем мой текст, и вставляем свой.
Заключает наш код уже известный нам тег </tr>. Только, в отличае от предыдущего - он является закрывающем, то есть является концом строки. Далее следуют такие же закрывающие
</tbody> и
</table> (конец тела таблицы и конец всего контейнера, соответственно).
Вот и все. Если Вы сделали все правильно, у Вас должно получиться расположение виджетов строго по линии, а не один под другим.