html - 响应式布局重新定位

Question

我有一点响应式布局内容定位问题。

我有一张“卡片”，在一个布局上看起来像下面这样，卡片在每个帖子中重复出现，其中有很多:

  --card---------------------------------------------------
| 
|   div 1                                               |
|                                                       |
|  --------------------------------------------------   |
|   div 2                                               |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|  ----------------------------- ---------------------- |
|   div 3                        |                      |
|                                |                      |
|                                | -------------------- |
|                                |   div 5              |
-------------------------------- |                      |
|          |                     | -------------------- |
|    div 4 |                     |                      |
|          |                     |   div 6              |
|          |                     |                      |
---------------------------------------------------------

它变得有点复杂，但这些是主要部分，比方说。这个(移动)的第二个版本添加了一个 div，这很容易，并重新定位 div 5 和 6，并调整 div 3 的大小。有点棘手，但我可以在 CSS 中做到这一点。具体来说，我将 div 3 和 4 分组在一个内联 block 包装中，然后我将 5 和 6 向上/向下 float ，以及其他一些操作。现在我必须将 div 4 相对于整个卡片水平居中，但我这样做时有一些边距，但并不总是正确的。另外，5-6 block 的 wrapper 相对定位，所以可以将它贴在 Angular 落里。

--card---------------------------------------------------
| 
|   div 1                                               |
|                                                       |
|  --------------------------------------------------   |
|   div 2                                               |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|                                                       |
|  ---------------------------------------------------- |
|   div 3                                               |
|                                                       |
|                                                       |
|                                                       |
------------------------------------------------------- |
|*new - 7* |               4     |  *6*                 |
|          |                     |                      |
|          |                     |                      |
|          |                     |                      |
|          |                     | ------------------   |
|          |                     |  *5*                 |
|          |                     |                      |
---------------------------------------------------------

现在真的很疯狂，在水平移动设计上，我明白了:

如您所见，现在我必须围绕 div 1 和 2 float ，完全拉出一些 boxen 并将它们放在不同的位置，并且通常会完全不同的布局。

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

有没有办法在不诉诸重复内容或相对定位的情况下做到这一切？

我具体做什么:- 我现在通过向左浮动来拉动 div 2，并且绝对定位 div1。- 我做了一些 pos: relative 和 float div 来拉 div 3 和 6，这看起来很脏但它有效。它关闭了一些屏幕尺寸，但我现在迷路了。- 我复制了一些内容(比如那个可怜的 div 5)并使用媒体查询来显示和隐藏。- 我把它弄得一团糟，因为当我深入挖掘自己时，我发现我需要更多技巧来“修复”不同布局上的东西，所以现在我完全迷路了。FWIW 这是一个 Angular 网络应用程序，但布局方面与它完全不同。

通常如何处理这类问题？

Answer 1

一般来说，如果您的布局因不同的屏幕尺寸而完全不同，您将达到这样一个程度:如果不借助复制，布局将变得非常难以维护。

在您的情况下，我个人的建议是使用基于 flexboxes 的网格(例如 Bootstrap 4.0 )，原因有二:

• 按列划分布局要容易得多，可以使用纯 css 类来完成，而不必 float 所有内容
• flexbox 为您提供了额外的灵 active 。例如，您可以应用到设计中的两个方便的东西是 order (使 div 2 在第三种布局中呈现在 div 1 之前)，并切换 flex-direction (使最后的布局从左到右流动，而不是从上到下流动)。进入它可能需要做一些工作，但我相信这会给你提供获得结果所需的灵 active 。

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