像表一样定位元素，而不使用表标记

Question

我试图将一些东西放在3列中。第一列有一个图标，第二列有文本，第三列有图像。

我希望在不使用Table标签的情况下执行此操作。使用CSS我已经正确放置了前两列，这是一个图像：

在右边，我需要添加另一张图片，而不会打扰左边的文字。

这是我的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

如果你想要另一个图像，请在“section”的其余部分之前将其添加到HTML中，然后将其右移：

img {
   float: right;
}

另外请注意，为什么不使用标题标签来显示标题？

Answer 2

您可以使用css display:table使用表格显示该内容，然后查看找到的文档here

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

如果我正确理解你的布局，我会这样做

<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设置）并保持矩形。这样它就变成了一个列。