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

我知道我可以使用float并将图像放在左边，但是我怎样才能得到这些数字，标题和这三列？HTML/CSS - 将文本与图像和数字对齐

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，但我的文字没有得到严格对齐到右侧，而我不能确定我可以如何添加图片显示的那些数字。

来源

2014-07-10 vbaid

把一些代码，小提琴总是最好的 – Thaddius

把你所有的一切，我们可以看到最新的错误。我们不是在这里为你编码整个事情 – user3767853

@Thaddius我已经做到了。 – vbaid

只是作为一个起点： 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：使用谷歌。

来源

2014-07-10 21:39:03 bardzusny

非常感谢。对不起，我还是一个小菜鸟，我真的想把所有东西都弄清楚。我非常感谢你的帮助，它确实帮助我弄清楚了事情。谢谢。 – vbaid

对于3列中的每一列使用单独的DIV。文本标题的类和文本的另一个类，然后是圆的类。边界半径，使其圆整，我想你可以找出其余的。这是否回答你的问题？

来源

2014-07-10 21:38:06 Mocolicious

非常多，但我唯一的问题是文本的多行不与图像居中。我怎样才能做到这一点？ – vbaid

为它使用单独的div。所以你会并排3个div，然后每个div里面都会有2个div用于顶部和底部。 – Mocolicious

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

回答

相关问题