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

为3列中的每列使用单独的DIV。文本标题的类和文本的另一个类，然后是圆的类。边界半径使它成为圆形，我想你可以弄清楚剩下的。这会回答你的问题吗？

Answer 2

作为一个起点： 的 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元素。

但现在认真地说：有成千上万的方法可以做到这一点。我的例子是缺乏：背景图像，正确的填充/边距，字体（？），列自己的宽度。那么请你尽力弄明白。 Protip：使用google。