CSS只有网格布局
我目前正在尝试创建一个仅用于各种原因的HTML/CSS网格布局(我知道Bootstrap等,但在这种情况下,这是没有选项&,我不能添加标记元素)。CSS只有网格布局
我有以下代码(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;
}
而这一切没有一个框架。
在此先感谢
下面是使用现有的标记
请注意,它们从顶部流到底部,不左到右的样本。
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>
谢谢你,像一个魅力工作! – Kemagezien
任何机会,这不是建立自上而下,但正在建立左右 – Kemagezien
@Kemagezien今天晚些时候会看看...让你知道 – LGSon
您的意思是这样的吗? https://jsfiddle.net/jw22Lqgo/
h3 {
display: inline-block;
}
ul{
display: block;
}
.col {
width: 32%;
border: 1px solid red;
display: inline-block;
}
.container {
width: 960px;
}
我设置宽度:32%,而不是33%,因为当添加边框时,它需要一些额外的空间,它不适合整个宽度容器。 – DevMoutarde
这确实是我想要实现的,但是,我无法在每组h3和ul周围添加“col”。 – Kemagezien
哦,你不能添加标记?当然,我试图找到另一种解决方案。但是,如果你打算分开那些,那么恐怕你无法摆脱这些额外的.coll ... – DevMoutarde
如果您可以设置固定尺寸,那么可能(我会试一试),如果不是,那么每个组都需要包装......或者您需要一个脚本,它将会有点棘手。 – LGSon
固定尺寸应该没问题,我仍然可以使用CSS查找方式重新编辑它们,然后使用mediaqueries然后 – Kemagezien
组数量也需要知道,是否有可能? – LGSon