CSS

Question

我有一个 div 和 display:table;。在那个 div 中，我有 2 个 div。 1 div 有一个 width:100%, div2 有 width:320px

在 div1 中，我有多行，每行最多有 3 divs（有些有 1 或 2）。我正在使用 display:flex; justify-content:space-around; 将行及其 div 垂直和水平对齐。

这里的问题是，当我使用 display:flex; 时，div2 的所有内容都被推到最后一行的下方。这很奇怪，因为 div1 和 div2 彼此相邻并且 div1 的内容不会干扰 div2.

问题的可视化示例：

====================================
=        div1          =    div2   =
====================================
=         +++          =           =
=         +++          =           =
=                      =           =
=    +++  +++  +++     =           =
=    +++  +++  +++     =           =
=                      =           =
=    +++  +++  +++     =           =
=    +++  +++  +++     =           =
=                      =  content  =
=                      =     of    =
=                      =    div2   =
=                      =   starts  =
=                      =    here   =
====================================

each ++ is a div inside a row
     ++

有没有什么方法可以正确完成这件事？ div1 和 div2 彼此相邻，而 div1 内容使用 display:flex; justify-content:space-around; 和 div2 内容从顶部开始并且不会被向下推通过 div1 个内容。

编辑：
这是我的 jsFiddle，用于显示错误。 https://jsfiddle.net/3uss54pc/

编辑 2：
我尝试删除 display:flex 并在 .row-div 上使用 float:left; 并在每个 .row 的前后添加一个 clear:both;，但 [=47] 的内容=]2还在被往下推

我想这不是 display:flex; 的问题，而是我的 display:table;??

的结构问题

Answer 1

我通过删除 flex 元素并改用 display:table 和 display:table-cell; 来解决此问题。这样div2的内容就显示在正确的位置了。

CSS - display:table 以 display:flex 为子 div

CSS - display:table with display:flex as sub-child div

flexbox

css-tables