CSS只有網格佈局

Question

我目前正在嘗試創建一個僅用於各種原因的HTML/CSS網格佈局（我知道Bootstrap等，但在這種情況下，這是沒有選項&，我不能添加標記元素）。

我有以下代碼（div容器每次其與李的一個UL A冠軍）：

<div> 
    <h3>title here</h3> 
    <ul> 
    <li>list-item</li> 
    <li>list-item</li> 
    <li>list-item</li> 
    </ul> 
    <h3>title 2 here</h3> 
    <ul> 
    <li>list-item</li> 
    <li>list-item</li> 
    </ul> 
    <h3>title 3 here</h3> 
    <ul> 
    <li>list-item</li> 
    </ul> 
</div> 

現在我希望能夠創建一個網格佈局。意義例如每個標題的寬度爲33％，所以我可以在旁邊有3個。

問題是每次之間都有一個ul。那麼有沒有可能的浮動解決方案，所以我可以有一個網格佈局作爲結果。

TITLE - TITLE - TITLE 
    ul   ul   ul 

-

h3 { 
    width: 33%; 
    float: left; 
    display: inline-block; 
} 

ul{ 
    float: left; 
    width: 33%; 
    display: inline-block; 
} 

而這一切沒有一個框架。

在此先感謝

Answer 1

下面是使用現有的標記

請注意，它們從頂部流到底部，不左到右的樣本。

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 220px;    /* 30px + 80px times 2 row */ 
 
} 
 
div > * { 
 
    width: 33.33%; 
 
    box-sizing: border-box; 
 
} 
 

 
h3 { 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
ul { 
 
    margin: 0; 
 
    height: 80px; 
 
}

<div> 
 
    <h3>title here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    </ul> 
 
    <h3>title 2 here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    </ul> 
 
    <h3>title 3 here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    </ul> 
 
    <h3>title 2 here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    <li>list-item</li> 
 
    </ul> 
 
    <h3>title 3 here</h3> 
 
    <ul> 
 
    <li>list-item</li> 
 
    </ul> 
 
</div>

---

更新基於評論

有一種可能性做左到右的構建，可視化，通過使用order財產

div { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 220px;    /* 30px + 80px times 2 row */ 
 
} 
 
div > * { 
 
    width: 33.33%; 
 
    box-sizing: border-box; 
 
} 
 
h3 { 
 
    margin: 0; 
 
    height: 30px; 
 
} 
 
ul { 
 
    margin: 0; 
 
    height: 80px; 
 
} 
 
div :nth-child(3), 
 
div :nth-child(4) { 
 
    order: 2; 
 
} 
 
div :nth-child(5), 
 
div :nth-child(6) { 
 
    order: 4; 
 
} 
 
div :nth-child(7), 
 
div :nth-child(8) { 
 
    order: 1; 
 
} 
 
div :nth-child(9), 
 
div :nth-child(10) { 
 
    order: 3; 
 
}

<div> 
 
    <h3>title 1 here</h3> 
 
    <ul> 
 
    <li>1 list-item</li> 
 
    <li>1 list-item</li> 
 
    <li>1 list-item</li> 
 
    </ul> 
 
    <h3>title 2 here</h3> 
 
    <ul> 
 
    <li>2 list-item</li> 
 
    <li>2 list-item</li> 
 
    </ul> 
 
    <h3>title 3 here</h3> 
 
    <ul> 
 
    <li>3 list-item</li> 
 
    </ul> 
 
    <h3>title 4 here</h3> 
 
    <ul> 
 
    <li>4 list-item</li> 
 
    <li>4 list-item</li> 
 
    </ul> 
 
    <h3>title 5 here</h3> 
 
    <ul> 
 
    <li>5 list-item</li> 
 
    </ul> 
 
</div>

Answer 2

您的意思是這樣的嗎？ https://jsfiddle.net/jw22Lqgo/

h3 { 
display: inline-block; 
} 

ul{ 
display: block; 
} 

.col { 
width: 32%; 
border: 1px solid red; 
display: inline-block; 
} 

.container { 
width: 960px; 
}