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

我知道我可以使用float并将图像放在左边，但是我怎么能得到这些数字、标题和这三列呢

HTML:

---

我将其用于CSS，但我的文本没有完全对齐到右侧，我不确定如何添加图片显示的数字。

对3列中的每列使用单独的DIV。一个类用于文本标题，另一个类用于文本，然后一个类用于圆。边界半径是圆的，我想你可以算出剩下的。这回答了你的问题吗？

作为一个起点：

.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：使用谷歌。

加上一些代码，小提琴总是会把你所有的东西都放在上面，我们可以看到哪里出了问题。我们不是来为这一切编写代码的you@Thaddius我已经这样做了，但我唯一的问题是多行文字并没有和图像居中。我怎么做？用一个单独的div。所以你会有3个div并排排列，然后每个div里面会有2个div来放上面和下面的东西。非常感谢。对不起，我还是有点糊涂，我真的想把一切弄清楚。我非常感谢你的帮助，这确实帮助我解决了问题。谢谢

    .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;

}

.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;
}