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

-1

我有一个带有display:table;的div。在那个div里，我有2个div。 1 div有width:100%，div2有width:320pxCSS - 显示：带有显示的表格：flex作为子子div

在div1我有多行，每行有3个最大值（有一些有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;，但DIV2的内容仍被向下推动。

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

来源

2016-03-07 DijkeMark

如果你可以使用Bootstrap，那么你应该使用它。它将帮助您 – bugwheels94

请通过提供JSFiddle或CodePen来添加一个起点。请参阅http://stackoverflow.com/help/mcve – Roy

@Ankit Bootstrap不是*永远*的答案，请记住，Bootstrap有点被强制实现希望提问者想要的。 – Roy

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

来源

2016-03-10 13:22:51 DijkeMark

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

回答

相关问题