html - 让元素彼此相邻

Question

我一直在四处寻找，但没有找到让我的元素也以我想要的方式显示的方法(主要是因为我完全不知道我在 CSS 中做什么)。

这是我的 JS fiddle : https://jsfiddle.net/q0qjhk8p/2/

这是一个关于我希望如何显示它的 ASCII 演示:

Title goes here
----------------------------------------------------------------------------
Content put here should be on                            [      image            
the left side, yet not affect the                               goes
avatar on the right.                                            here       ]
                                                            And this 
                                                            text should 
                                                            be centered 
                                                            underneath the 
                                                            image.
---------------------------------------------------------------------------
Blablablablaba footer

Answer 1

所以这是一个 solution using FlexBox

需要注意的是...

1. 我删除了所有文本对齐内容。这是用于获取您正在寻找的布局的错误属性。

2. 我将 Avatar 容器设置为百分比宽度，并将其中图像的宽度设置为 100%。这样你就有了一个 react 灵敏的解决方案。如果需要，您可以设置头像容器的显式宽度。

3. 如果需要，您也可以为副本设置明确的宽度。我建议设置百分比宽度和右边距。

繁重的工作由 flexbox 完成，

.user-profile-card > .user-profile-card-body {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 10px;
    background: #AAA;
}