我无法将照片对齐到我想要的方式
我正在尝试构建一个代码，我可以在左侧有一张大照片，然后在右侧有三张小图片(而它们都在中心对齐(，但三张小图像最终会转到底部
这是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>页面的左中心应该有一张大照片，右中心应该有三张小图片。请帮忙。我尝试了很多方法，但它就是不起作用。
这就是它显示的方式 我做了什么
这就是它应该的样子。 我希望它看起来像什么样子
首先，你的div都很乱。然后应该在 topnewsdiv 中添加一个显示弹性，以并排放置每个单独的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>