HTML/CSS - 将文本与图像和数字对齐

Question

我知道我可以使用 float 并将图像放在左侧，但我怎样才能得到这些数字、标题和那三列？

HTML:

    <div class="images">
  <ul>
    <li class="image"><img src="https://www.ofbizdemo.com/images/products/PC001/large.png" />
    <p class="padding">Text Here</font>
  </ul>
</div>

CSS:

    .images ul li {
   display: inline;
}

.image {
   float: left; // float to the left
}

p.padding {
    float: right;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 500px;
    padding-left: 150px;

}

我将它用于我的 CSS，但我的文本并没有与右侧完全对齐，而且我不确定如何添加图片显示的那些数字。

Answer 1

作为起点:<强> http://jsfiddle.net/wpQb9/1/

.col {
    float: left;
    padding: 0 20px;
    width: 300px;
    text-align: right;
    position: relative;
}
.col:before {
    position: absolute;
    top: 20px;
    left: 30px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 20px;
    background: yellow;
    display: block;
}
.col:nth-child(1):before {
    content:"1";
}
.col:nth-child(2):before {
    content:"2";
}
.col:nth-child(3):before {
    content:"3";
}
p {
    margin-left: 100px;
}

.col 是列之一，一个 div 元素。

但现在说真的:有成千上万种方法可以做到这一点。我的示例缺少:背景图像、适当的填充/边距、字体(？)、列本身的宽度。这么多请你尽力弄清楚。提示:使用谷歌。