Html 我怎样才能让4个div相邻

大家好，我有一个标题，标题中有一个div，标题中有一个pic，但我想把我的pic显示在彼此旁边，但不是在彼此下面，而是在彼此下面显示。我如何解决这个问题？我试图更改css，但没有成功

现在，当我添加另一个div时是这样的

现在情况如何：

我想要这样：

这是我的密码

@导入url（'https://fonts.googleapis.com/css?family=Josefin+Sans:400400i，600600i'）；
html，
身体{
保证金：0；
身高：120%；
字体系列：“Josefin Sans”，无衬线；
}
.标题{
位置：相对位置；
溢出：隐藏；
显示器：flex；
柔性包装：包装；
证明内容：中心；
调整项目：灵活启动；
调整内容：灵活启动；
高度：50vw；
最小高度：400px；
最大高度：550px；
最小宽度：300px；
颜色：#eee；
}
.标题：之前{
内容：“；
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
-webkit背面可见性：隐藏；
-webkit变换：translateZ（0）标度（1.0,1.0）；
变换：translateZ（0）；
背景：#1B2030 url(https://unsplash.it/1999/999?image=1063)上中不重复；
背景尺寸：封面；
背景附件：固定；
动画：成长60秒线性10毫秒无限；
过渡：所有0.2秒缓进缓出；
z指数：-2
}
.标题a{
颜色：#eee
}
.info{
宽度：100%；
填充：25%10%010%；
文本对齐：居中；
文本阴影：0 2px 3px rgba（0,0,0,0.2）
}
.作者{
显示：内联块；
宽度：50px；
高度：50px；
边界半径：50%；
背景：url(http://favim.com/media/uploads/images/610/140308/black-n-white-cute-funny-iron-man-Favim.com-1462744.jpg)中心不重复；
背景尺寸：封面；
盒影：0 2px 3px rgba（0,0,0,0.3）；
利润下限：3倍
}
.info h4，
梅塔先生{
字号：0.7em
}
梅塔先生{
字体：斜体；
}
.twtr{
利润上限：100像素
}
.btn.twtr：之后{
内容：“\1F426”；
左侧填充：5px
}

测试头
测试

截止2017年5月30日

添加：

.meta {
    display: inline-block
}

---

默认情况下，

div

是int

display

mode

block

，因此它会包装整个队列。更改为

内联块

以允许水平多个div

我认为您应该尝试使用

.meta{
显示器：flex；
}

---

这还会将所有的

对齐到一行中

这里有两个选项

您可以按照中的说明使用Bootsrap

使用下面的CSS

梅塔先生{ 浮动：左； 宽度：30%； }

---

您可以使用仅适用于图像div的任何其他类。

您首先要清除正文的边距和填充，以防万一

body{padding:0;margin:0;}

之后，为每个div指定25%的宽度，并显示inline或inline块

div{width:25%;display:inline;}

---

您可以使用flex属性

---

显示：flex仅将flex布局应用于容器的flex项或子项。因此，容器本身保持一个块级元素，因此占据整个屏幕的宽度。。。显示：内联flex将flex布局应用于flex项或子项以及容器本身。

谢谢，我在10分钟内接受您的回答注意

{display:flex；}

到父div（wrap div）如果我添加了4个div，它会将最后一个div放在它下面，可能是重复的，请突出显示您给出的代码/建议。