页面中心位于页面响应块的动态高度

简短问题：如何在页面中心响应一组动态高度div块。请参阅下面的简化代码：页面中心位于页面响应块的动态高度

长：我有一组数据进入每个块。表格，图形等数据都是由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>

来源

2016-08-01 Bill Aspromonte

现在我可能会误解，垂直或水平居中？ – LGSon

水平又左右 –

使块周围的包装，并给它一个宽度：

<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/

来源

2016-08-01 21:48:08

马鲁恩感谢你的快速回应。问题是当你删除浮动：留下红色的干净块不再在黄色的进展。这一直是我的挑战......功能是我设计的关键 –

好吧，我明白了。我认为你需要媒体查询 –

我总共发现了黑客工具，说明了什么我试图产生而不是在一个优雅的方式在所有。我希望有更好的解决方案。必须有一个解决方案，不需要设置宽度...

<!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>

来源

2016-08-01 22:30:21

你真的需要像你一样做，除非你想开始使用脚本，否则没有其他办法 – LGSon

页面中心位于页面响应块的动态高度

回答

相关问题