Question

简短问题：如何在页面上设置一组响应动态高度div块。请参阅以下简化代码：

long：我有一组数据进入每个块。表格，图表等数据都是由mysql驱动的，并且整天都在动态变化，所以这些块的高度不确定并且是动态的。我想让块自动定位自己，就像在示例代码中一样。基本的响应页面布局。例如：粉色表可以是50px或5000px。左侧的浮动是关键的，因此根据需要将多个块堆叠到右侧。

挑战在于块位于页面的中心。我似乎无法想出那一个。

我尝试过并研究过一切。 Flex似乎不支持这个概念。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>
.statusC, .statusC2 {
    float: left;
}

</style>

</head>
<body>

    <div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>

    <div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>

</body>
</html>

Answer 1

在块周围做一个包装并给它一个宽度：

<div class="wrapper">
    <div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</div>

和CSS：

.wrapper {
    margin: 0 auto;
    position :relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
 }

授予了块的浮动。

https://jsfiddle.net/Marouen/0s2pwz5t/

Answer 2

我找到了一个完整的黑色，显示了我想要制作的东西，但根本不是一个优雅的方式。我希望有更好的解决方案。必须有一个不需要设置宽度的解决方案......

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test</title>
    <meta charset="utf-8">

<style>
.statusContainer2 {
    display: flex;
    justify-content: center;
}

.statusContainer3 {
}
@media screen and (max-width: 1999px) { .statusContainer3 { width:1500px; } }
@media screen and (max-width: 1499px) { .statusContainer3 { width:1000px; } }
@media screen and (max-width: 999px) { .statusContainer3 { width:500px; } }

.statusC {
    float: left;
}
</style>

</head>
<body>

<div class="statusContainer2" >
<div class="statusContainer3" >
    <div class="statusC" style="height: 300px; width:500px; background-color:pink;">table</div>

    <div class="statusC" style="height: 200px; width:500px; background-color:yellow;">progress</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:red;">clean</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:green;">stat</div>
    <div class="statusC" style="height: 200px; width:500px; background-color:blue;">stat2</div>
</div>
</div>

</body>
</html>

以动态高度为中心的页面响应块

2 个答案: