我有一点响应式布局内容定位问题。
我有一张“卡片”，在一个布局上看起来像下面一样，每个帖子的卡都会重复，其中有很多：
--card---------------------------------------------------
|
| div 1 |
| |
| -------------------------------------------------- |
| div 2 |
| |
| |
| |
| |
| |
| |
| |
| |
| ----------------------------- ---------------------- |
| div 3 | |
| | |
| | -------------------- |
| | div 5 |
-------------------------------- | |
| | | -------------------- |
| div 4 | | |
| | | div 6 |
| | | |
---------------------------------------------------------
它有点复杂，但这些是主要部分，让我们说。 这个（移动）的第二个版本添加了一个div，这很容易，并重新定位div 5和6，并调整div 3.有点棘手，但我可以在CSS中做到这一点。具体来说，我将div 3和4组合在一个内联块包装中，然后我向上/向下浮动5和6，还有一些事情要做。而现在我必须将div 4相对于整张卡水平居中，但我这样做的边缘并不总是正确的。 另外，5-6挡的包装器相对定位，所以可以将它粘在角落里。
--card---------------------------------------------------
|
| div 1 |
| |
| -------------------------------------------------- |
| div 2 |
| |
| |
| |
| |
| |
| |
| |
| |
| ---------------------------------------------------- |
| div 3 |
| |
| |
| |
------------------------------------------------------- |
|*new - 7* | 4 | *6* |
| | | |
| | | |
| | | |
| | | ------------------ |
| | | *5* |
| | | |
---------------------------------------------------------
现在真的很疯狂，在横向移动设计上，我明白了：
正如你所看到的，现在我必须漂浮在div 1和2之间，并完全拉出一些盒子并将它们放在不同的地方，并且通常完全不同的布局。
--card--------------------------------------------------------------
| div 2 | div 1 | div 7 | div 4 | n |
| |---------------------| | e |
| | | | w |
| | div 5 | | |
| | | 8 |
| | -----------------------------------------|
| | | |
| | div 3 | 6 |
| | | |
| | | |
| | | |
--------------------------------------------------------------------
有没有办法在不诉诸重复内容或相对定位的情况下完成所有这些？
我具体做了什么： - 我现在通过向左浮动来拉div 2，我绝对定位div1。 - 我做了一些pos：relative和float divs来拉动div 3和6这看起来很脏但是有效。有一些屏幕尺寸关闭，但我现在迷路了。 - 我复制了一些内容（就像那个可怜的div 5）并使用媒体查询来显示和隐藏。 - 我总体上弄得一团糟，因为当我更多地挖掘自己时，我发现我需要更多的黑客来“修复”不同布局的东西，所以现在我完全迷失了。 FWIW这是一个Angular webapp，但布局事情与此完全不同。
一般如何处理这类问题？
答案 0 :(得分：1)
一般情况下，如果您的布局对于不同的屏幕尺寸而言完全不同，那么您将要达到布局变得非常难以维护而不诉诸复制的程度。
我个人的建议是使用基于flexbox的网格（例如Bootstrap 4.0），原因有两个：
This指南对于更深入地了解它们非常有用。