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,但我的文字没有得到严格对齐到右侧,而我不能确定我可以如何添加图片显示的那些数字。
只是作为一个起点: 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:使用谷歌。
非常感谢。对不起,我还是一个小菜鸟,我真的想把所有东西都弄清楚。我非常感谢你的帮助,它确实帮助我弄清楚了事情。谢谢。 – vbaid
对于3列中的每一列使用单独的DIV。文本标题的类和文本的另一个类,然后是圆的类。边界半径,使其圆整,我想你可以找出其余的。这是否回答你的问题?
非常多,但我唯一的问题是文本的多行不与图像居中。我怎样才能做到这一点? – vbaid
为它使用单独的div。所以你会并排3个div,然后每个div里面都会有2个div用于顶部和底部。 – Mocolicious
把一些代码,小提琴总是最好的 – Thaddius
把你所有的一切,我们可以看到最新的错误。我们不是在这里为你编码整个事情 – user3767853
@Thaddius我已经做到了。 – vbaid