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; 
}