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

Question

我在 p 标签中有一张图片和一些文本，link 需要垂直对齐。当我浮动图像时效果很好。但是当我在 p 标签和 link 中使用 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>

提前致谢。 :)

Answer 1

您需要将 display: block; 添加到 a.link class 样式中。此外，在图像上设置 margin-right: 30px;，并从 p.text 和 a.link 元素中删除 padding-left: 30px; 样式。最终 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;
}

Answer 2

我有一个快速的解决方案给你。看起来您需要在文本周围添加一个容器，然后添加您想要的填充。请参阅下面的快速说明。

将以下内容添加到您的 css：

div.textcontainer{
padding-left:130px
}

同时从 p.text 中删除 padding-left:30px，如下所示：

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

最后在文本周围添加一个容器，如下所示：

<div class="textcontainer">
//Insert coding you wish
</div>

这是对您的解决方案的快速修复。理想情况下，您会希望使用 bootstrap 或其他一些 css 框架来使设计流畅。我希望这对你有用。

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

image and multiple line of text and links vertical alignment

html

css

image

hyperlink

vertical-alignment