Question

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

在div1中，我有多行，每行最多有3个div（有些有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，而是使用float:left;上的.row-div并在每个clear:both;添加.row，但div2的内容仍然是被推倒了。

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

Answer 1

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

CSS - 显示：带有display的表：flex作为子子div

1 个答案: