Позиционирование элементов, таких как таблица, без использования тега таблицы

Question

Я пытаюсь расположить некоторые вещи в 3 столбцах. В первом столбце есть значок, во втором столбце - текст, а в третьем столбце - изображение.

Я хочу сделать это без использования тега Table. Используя CSS, я правильно разместил первые 2 столбца, вот изображение:

Справа мне нужно добавить другое изображение, не мешая тексту слева.

Это мой HTML-код (сокращенный до основ):

            <img src="Images/icon-1.png" /> 
            <span class="content-title">My title 1</span> 
            <p>
            Here is my text ...
            </p>
            <br />


            <img src="Images/Icon-2.png" /> 
            <span class="content-title">My Title 2</span> 
            <p>
            Here is my text ...
            </p>
            <br />

И CSS, эмулирующий макет таблицы:

.content-title
{
    font-size: 26px;
    font-family: Helvetica,Arial,sans-serif;
    color: #363636;
    top: -28px;
    position:relative;
    left:+10px;
    font-weight: bold;
}

#content-benefits p
{
    margin-left:80px;
    top:-30px;
    position:relative;
    width:325px;
}

Моя проблема в том, что я не могу понять, как разместить свое изображение справа, не делая его position:absolute;, но если я это сделаю, мне придется (AFAIK) использовать JavaScript для размещения изображений относительно соответствующие им пункты.

Answer 1

Если вам нужно другое изображение, добавьте его в HTML-код до остальной части «раздела», а затем добавьте его прямо с помощью:

img {
   float: right;
}

В другой заметке, почему вы не используете заголовочные теги дляпоказать ваши заголовки?

Answer 2

если я правильно понимаю ваш макет, я бы сделал это

<img style="float:left; width:80px" src="image/icon-1.png"/>
<div style="width:405px">
  <img style="float:right; width:80px"/>
  <div style="float:left; width:325px">
    <span/>
    <p>
    ...
    </p>
  </div>
</div>

вам не понадобится другое позиционирование, которое вы использовали

, если вы не можете изменить разметку, чем поставить width наspan и p и float:left, а также для float:right и width в img

при установке float автоматически преобразуется элемент в display:inline-block, что означает, что он больше не распределяетсядо свободной ширины страницы, но занимает минимально допустимое пространство (установлено width) и остается прямоугольным.Таким образом, он становится чем-то вроде колонны.

Answer 3

Поместить изображение после тега конца заголовка

<img src="Images/icon-1.png" /> 
            <span class="content-title">My title 1</span> 
<img src="Images/icon-1.png" /> 
            <p>
            Here is my text ...
            </p>
            <br />

Answer 4

Вы можете использовать css display:table, чтобы сделать это, используя таблицу, взгляните на документы по этому найденному здесь