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

回答

相關問題