使用CSS修复文本和文章图像的对齐方式

Question

1. 我希望文本与右边的文章图像对齐。

2. 我预计.watch-listen链接必须更改才能更改并以正确的方式对齐。

• 我尝试向类添加一个页边空白属性，但没有结果。我下一步该怎么做

.article-side-image{

float: left;
width: 140px; 
margin-left: 8px;
margin-right:4px;
margin-top: 8px;

}

.watch-listen-link { 

text-decoration: none;
color: black;
font-weight: bold;
font-size: 18px;

}

.watch-listen-link:hover{

color: #1167a8;

}

.side-article {
float: right;
width: 250px;
position: relative;
top: -13px;
}

.no-border{

border-left: none;
padding: 0;

}

.border-right{

border-right: 1px solid #CCCCCC;
}


</style>    


body section: 
img class="article-side-image" src="images/article3.png">

<div class= "side-article">
<p><a class= "watch-listen-link" href=""> SpaceX rocket explodes during landing </a></p>
<p> <img class="clock" src="images/Clock-image.png"> <span class= "date  border-right"> 19 January 2016 </span> <br> <a class="topic-link no-border" href=""> Science & Environment </a>  </p>
</div>

Answer 1

您试图构建的内容看起来很像媒体对象。这种模式在整个网络上都被使用。

您可能不想为此使用float。最近添加的CSS网格或Flexbox使创建媒体对象变得越来越容易。

我改编了我之前提到的关于媒体对象的文章中的配方：

.media {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-template-rows:1fr auto;
grid-template-areas:
"image content"
"image footer";
grid-gap: 20px;
margin-bottom: 4em;
}
.img {
grid-area: image;
}
.content {
grid-area: content;
}

<div class="media">
<div class="img">
<img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
</div>
<div class="content">
<p>
<a>SpaceX rocket explodes during landing</a>
</p>
<p>
<img class="clock" src="images/Clock-image.png">
<span class= "date  border-right"> 19 January 2016 </span> <br>
<a class="topic-link no-border" href=""> Science & Environment </a>
</p>
</div>