我无法按照自己想要的方式对齐照片
我正在尝试建立一个代码，在其中我可以在左边有一张大照片，然后在右边有三张小图片（它们都在中心对齐），但是这三张小图片最终会移到底部
这是CSS
.topnews{
}
.featurednews {
text-align: center;
left: 50%;
top: 50%;
}
.featurednews img {
width: 700px;
height: 400px;
padding: 10px;
border: 1px solid #233988;
position: ralative;
left: 50%;
top: 50%;
}
.otherfeaturednews{
text-align: center;
}
.otherfeaturednews img{
display: inline-block;
width: 200px;
height: 100px;
padding: 6px;
position: relative;
float: center;
}<pre>
<code>
<html>
<div class="topnews">
<div class="featurednews"><img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="random image"></div>
<div class="otherfeaturednews"><img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="image at the side">
<div class="otherfeaturednews"><img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="image at the side">
<div class="otherfeaturednews"><img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="image at the side">
</div>
</div>
</div>
</div>
</html>页面的左中心应有一张大照片，右中心应有三张小照片。请帮忙。我尝试了太多的方法，但是它根本不起作用。
这是它的显示方式What I have done
这就是它的外观。how I want it to look like
首先，您的div都很混乱。然后应该在topnews div中添加一个display flex以将每个单独的div容器并排放置]
.topnews{
width: 100%;
display: flex;
justify-content: space-between;
height: 450px;
}
.featurednews {
width: 75%;
height: 100%;
}
.featurednews img {
width: 100%;
height: 100%;
}
.otherfeaturednews{
text-align: center;
display: flex;
flex-direction: column;
width: 20%;
height: 100%;
}
.otherfeaturednews .otherfeaturednewsimages{
height: 150px;;
margin: 10px;
}
.otherfeaturednewsimages img{
display: inline-block;
width: 100%;
height: 100%;
}<div class="topnews">
<div class="featurednews"><img
src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="random image">
</div>
<div class="otherfeaturednews">
<div class="otherfeaturednewsimages">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="image at the side">
</div>
<div class="otherfeaturednewsimages">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="image at the side">
</div>
<div class="otherfeaturednewsimages">
<img src="https://images.pexels.com/photos/1402787/pexels-photo-1402787.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
alt="image at the side">
</div>
</div>
</div>