Css Flexbox标题：将框右侧与行中的两个元素对齐

刚从Flexbox开始。通过尝试创建一个非常简单的简历网站进行练习

代码笔在这里：

我正在尝试将

社交容器

放在

图片容器

的左侧。这两个容器都位于

概要文件容器

中，同时为

名称容器

提供了大部分空间（aka

概要文件容器

将使用它需要的内容，而

名称容器

将占用其余部分）

---

无论我做什么（我已经尝试了很多），社交容器最终都位于图片容器之上，我觉得我遗漏了一些非常基本的东西。

我不完全确定你的HTML是否反映了你正在尝试做的事情。现在是这样的,

- header
-- .name-container  
-- .profile-container
--- .social-container
---- .picture-container

如果

.picture container

是

.social container

的兄弟元素，而不是子元素，那么就更容易了

这样，您就可以对

.profile container

使用

display:flex

，并同时获得这两个元素

正文{
显示器：flex；
弯曲方向：立柱；
字体系列：“Helvetica Neue，Helvetica，Liberation Sans，Arial，Sans serif”；
}
标题{
背景：#42A8C0；
宽度：100%；
颜色：白色；
文本对齐：居中；
}
img{
最大宽度：100%；
}
.配置文件容器{
显示器：flex；
}

我的名字
当前位置的小结

我不完全确定您的HTML是否反映了您正在尝试做的事情。现在是这样的,

- header
-- .name-container  
-- .profile-container
--- .social-container
---- .picture-container

如果

.picture container

是

.social container

的兄弟元素，而不是子元素，那么就更容易了

这样，您就可以对

.profile container

使用

display:flex

，并同时获得这两个元素

正文{
显示器：flex；
弯曲方向：立柱；
字体系列：“Helvetica Neue，Helvetica，Liberation Sans，Arial，Sans serif”；
}
标题{
背景：#42A8C0；
宽度：100%；
颜色：白色；
文本对齐：居中；
}
img{
最大宽度：100%；
}
.配置文件容器{
显示器：flex；
}

我的名字
当前位置的小结

你应该首先清理你的HTML，

没有正确关闭，你缺少一些关于这一点的关闭说明！现在应该修好了。谢谢你的提醒。我想，在添加新的

时，我有点陷入了混乱。你应该首先清理你的HTML，

没有正确关闭，你缺少了一些关于这方面的关闭说明！现在应该修好了。谢谢你的提醒。我想，在添加新的

时，我有点陷入了混乱。这正是我试图实现的目标。在这一过程中，我的亲子关系有些混乱。加上一些填充物，现在看起来像是我想要的！这正是我试图实现的目标。在这一过程中，我的亲子关系有些混乱。加上一些填充物，现在看起来像是我想要的！