我们有一个 100% 源自数据库和 Web 服务组合的 Web 应用程序。数据库引用标签以及在 Web 服务中使用哪些字段名称来显示值。基本上,在最后的 HTML 输出中,我不知道页面上会显示什么或显示多少组和字段。
这是我的 JSFiddle Example
.group {
float: left;
margin: 20px;
min-width: 300px;
max-width: 400px;
}
客户希望组彼此堆叠,在上面的示例中,组 3 应该更靠近组 1,并且它们之间没有太多空间。事实上,他们想要的空间与你缩小窗口或在移动设备上运行时的空间相同,即四面八方的组之间有 20 像素,就这样。 Float: Left,这是我正在使用的,将顶部与上一行中最高组的底部对齐,这不是客户想要的。有没有办法用 PURE CSS 做到这一点,或者我必须使用 Angular 或其他一些 Javascript 库。我更喜欢使用纯 CSS。
最佳答案
我解决了我自己的问题。我更新了我的 JSFiddle Example
@media only screen and (max-width: 740px)
{
.groupcol {
width: auto!important;
float: none!important;
border: 1px solid #fff;
margin: 0px!important;
margin-bottom: -10px!important;
}
.float {
float: none!important;
width: auto!important;
margin-bottom: 20px!important;
}
}
.table {
display: table;
border: 0px solid red;
}
.row {
display: table-row;
}
.col {
display: table-cell;
width: 720px;
min-width: 361px;
border: 0px solid blue;
}
.groupcol {
width: 340px;
float: left;
margin-right: 20px;
}
.float {
float: left;
width: 100%;
}
.group {
margin: 10px;
border: 1px solid #000;
min-width: 340px;
border-radius: 20px 20px 5px 5px;
box-shadow: 7px 7px 5px #ccc;
}
.title {
background-color: #808080;
color: #fff;
padding: 5px;
margin: 0px;
font-weight: bolder;
border-radius: 20px 20px 0px 0px;
text-align: center;
}
.footer {
background-color: #808080;
color: #fff;
padding: 5px;
margin: 0px;
line-height: 5px
border-radius: 0px 0px 5px 5px;
}
.data {
display: table;
border-top: 1px solid #000;
width: 100%;
}
.content {
display: table-row;
background-color: #fff;
color: #666;
}
.label {
white-space: nowrap;
font-weight: bold;
display: table-cell;
padding: 5px;
border-right: .5px dotted #ddd;
border-bottom: .5px solid #ddd;
}
.value {
display: table-cell;
padding: 5px;
overflow: hidden;
border-bottom: .5px solid #ddd;
}
关于html - 显示的动态字段和值组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45088322/