gpt4 book ai didi

html - 图像和多行文本和链接垂直对齐

转载 作者:行者123 更新时间:2023-11-28 01:05:45 25 4
gpt4 key购买 nike

我在 p 标签和链接中有一个图像和一些文本要垂直对齐。当我 float 图像时效果很好。但是当我在 p 标签和链接中使用 padding left 时,它并没有完美地获得填充。


click here to see the image I need look like


here is a fiddle

.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
clear:both
}

img {
float: left;
}
p.text {
padding-left: 30px;
display: block;
padding-bottom: 22px;
color: #222222;
}

a.link {
text-decoration: none;
padding-left: 30px;
text-transform: uppercase;
line-height: 22px;
color: #777777;
}

a.date {
color: #e10622;
text-decoration: none;
}
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>
<div class="wrapper">
<img src="https://placehold.it/100x100" alt="">
<p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p>
<a href="#" class="link">Days are all happiness is key
and Free</a>
</div>


<br>
<br>
<br>

<a href="http://prntscr.com/cpusej" style="text-align:center; display: block; padding: 10px; background: #f44; font-size: 18px">Please see here what I need</a>




提前致谢。 :)

最佳答案

您需要将 display: block; 添加到您的 a.link 类样式中。另外,在你的图片上设置 margin-right: 30px;,并从你的 p.text 中移除 padding-left: 30px; 样式, a.link 元素。最终的 CSS 如下:

.wrapper {
font-family: sans-serif;
width: 400px;
margin-top: 30px;
margin-bottom: 30px;
}

img {
float: left;
margin-right: 30px;
}
p.text {
display: block;
padding-bottom: 22px;
color: #222222;
}

a.link {
text-decoration: none;
text-transform: uppercase;
line-height: 22px;
color: #777777;
display: block;
}

关于html - 图像和多行文本和链接垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39862126/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com