在左侧添加一张照片，在右侧添加 3 张照片答案

【问题标题】：Adding a photo to the left and 3 to the side on the right在左侧添加一张照片，在右侧添加 3 张照片
【发布时间】：2020-02-16 12:17:36
【问题描述】：

我无法按照我想要的方式对齐照片

我正在尝试构建一个代码，其中我可以在左侧有一张大照片，然后在右侧有三张小图片（虽然它们都在中心对齐）但三张小图片最终会转到底部

这是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

【问题讨论】：

标签： html css

【解决方案1】：

首先，您的 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>

【讨论】：

非常感谢。我看到了我所做的，这将是一个宝贵的教训。我注意到虽然我不能把它移到中心。你知道这是为什么吗？
你想把哪个移到中心？左图还是右图组？
我想通了。不过谢谢。我只需要调整 topnews div 中的位置。