响应布局重新定位

Question

我有一个有反应的布局内容定位问题。

我有一张“卡片”，在一个版面上看起来像下面，每篇帖子都会重复这张卡片，其中有很多：

  --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周围浮动，完全拉出一些boxen，把它们放在一个不同的位置，并且通常会完全地做一个不同的布局。

--card--------------------------------------------------------------
| div 2                 |   div 1   |  div 7  | div 4          | n |
|                       |---------------------|                | e |
|                       |                     |                | w |
|                       |  div 5              |                |   |
|                       |                                      | 8 |
|                       | -----------------------------------------|
|                       |                              |           |
|                       |  div 3                       |  6        |
|                       |                              |           |
|                       |                              |           |
|                       |                              |           |
--------------------------------------------------------------------

有没有办法做到这一切，而不采取重复的内容或相对定位？

我具体做的是：-我现在拉div 2，使它向左浮动，我绝对定位div1。-我做了一些pos:相对和浮动div周围拉div 3和6，这看起来很脏，但它的工作。它关机的地方有几个屏幕大小，但我现在迷路了。-我复制了一些内容(比如那个可怜的div 5)，并使用媒体查询来显示和隐藏。-我把它弄得一团糟，因为当我更多地挖掘自己的时候，我发现我需要更多的黑客来“修复”不同布局上的东西，所以现在我完全迷失了方向。FWIW这是一个角度的网页应用程序，但布局的东西是完全不同的，反正。

一般情况下如何处理这类问题？

Answer 1

一般来说，如果您的布局是完全不同的不同的屏幕大小，您将达到一个点，布局只是变得非常难以维护，而不诉诸复制。

就您的情况而言，我个人的建议是使用基于柔性盒(如引导4.0)的网格，原因有二：

• 在列中划分布局要容易得多，并且可以使用纯css类来完成，而无需浮动所有内容。
• 柔性盒为您提供了额外的灵活性层。例如，您可以应用到您的设计中的两个方便的东西是订单 (使div 2在第三个布局的div 1之前呈现)和切换弯曲方向 (使最后一个布局流从左到右，而不是从上到下)。这可能是一些工作量，但我相信，这将给予您所需的灵活性，以获得一个结果。

这指南对于更深入地理解它们非常有用。