我检查了一些关于从html表到css的转换的帖子,但找不到我正在寻找的内容并希望得到一些帮助.
我正在使用一张桌子作为一些不同尺寸的储物柜的图形演示.结果,一些表格单元跨越多行.当有一些静态模型时,一切都很好.现在我必须处理动态配置和表只是一个痛苦,所以我试图将其转换为CSS.
当单元格跨越多行并且不确定如何设置CSS时,我遇到了一些问题.在尝试动态生成代码之前,我需要查看它是如何静态完成的.
这是一个简短的样本:
CSS(Attempt),可以获得第一行但不知道如何做其余的事情:
还尝试了css“table”,使用其中一个帖子here中的代码:
css-table">
css-table-tr">
css-table-td_kiosk">R0C0css-table-td_small">R0C1css-table-td_small">R0C2
编辑:
这是我需要转换的(样本)表.储物柜的位置和大小将根据型号而变化.如果我能弄清楚一个模型使用CSS会是什么样子,我可以通过它来实现它的动态.括号中的L,M和S表示锁柜大小.中等小2倍,大4倍小,而小亭是小储物柜大小的6倍.
谢谢.
编辑2:
下图显示了我需要显示的内容(一种变体). L:大储物柜,高100 px,M:中等,高50 px; S:小;身高25像素.但是,即使我指定了flex-direction:column,我也似乎无法让锁定器按列显示.
编辑3:
这是我正在使用的CSS和HTML.一旦我向flex-direction添加宽度和高度,它就开始按列显示图像.我想这是一个无证件的要求.但是,现在所有内容都显示在列中.这就是我所拥有的:
.lockers {
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-justify-content: space-around;
justify-content: space-around;
align-items: flex-start;
}
.locker-column {
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-align-items: flex-start;
align-items: flex-start;
height:420px;
width:100px;
}
img {
display: flex;
max-width: 100px;
height: auto;
-webkit-flex-grow:1;
flex-grow:1;
}
最佳答案
不要使用display:table.这是你在找什么?
编辑:精化
我不认为你正在抓住这个概念..
我会试着向你解释你应该怎么想这个.通常使用表格,你在思考行数,灵活空间可能就是这种情况,当我编写我的解决方案时,我正在考虑列.
请注意我如何使用flex-direction:列在储物柜的孩子上?这个div从顶部到底部横跨整个列.你可以做任何你想做的事,放任何你想要的储物柜,无论大小.
如果你对flexBoxes没有任何经验,我建议你阅读它,但下面的解决方案为你提供了一个核心基础.
This tutorial是一个很好的起点.
.lockers {
display: flex;
justify-content: space-around;
align-items: flex-start;
}
.locker-column {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100px;
}
.locker {
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
text-decoration: underline;
font-weight: 600;
text-transform: uppercase;
margin: 2px 0;
height: 100%;
}
.large {
background-color: yellow;
color: red;
height: 100px;
}
.small {
background-color: navy;
color: white;
height: 25px;
}
.medium {
background-color: green;
color: red;
height: 50px;
}
.kiosk {
color: red;
text-decoration: none;
text-transform: lowercase;
height: 150px;
}
猜你在找的HTML相关文章