html - 递归 CSS 布局-6ren

html - 递归 CSS 布局

转载作者：搜寻专家更新时间：2023-10-31 08:22:55

我正在尝试创建一个基于黄金比例 (1:1.618) 的响应式布局，我希望它可以无限递归。

我知道，在这么多层之后它永远不会被使用，但我开始沉迷于我无法弄清楚如何使它无限递归的事实!

这里是:

* { box-sizing: border-box; }
.top {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/**
*
* GOLDEN RATIO LAYOUT
*
**/

/**
* Default layout is left to right, top to bottom
* To use the Golden Ratio Layout, create a container.
* Within that container, have only two childen.
* The first child should have the class .large-side,
* and the second child should have the class .small-side .
* I suggest nesting layouts on the small side, where the
* element would have .small-side and .golden-ratio-layout .
**/

.golden-ratio-layout {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}
.golden-ratio-layout > .large-side {
    flex: 1.618 1 0%;
}
.golden-ratio-layout > .small-side {
    flex: 1 1 0%;
}
.golden-ratio-layout .panel-wrapper {
    padding: 0;
}
.golden-ratio-layout .golden-ratio-panel {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Standard flow */
.golden-ratio-layout .golden-ratio-layout {
    flex-direction: column;
}
.golden-ratio-layout > .golden-ratio-layout {
    flex-direction: row;
}
.golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: column-reverse;
}
.golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: row-reverse;
}

/* Reverse flow */
.golden-ratio-layout.reverse {
    flex-direction: column-reverse;
}
.golden-ratio-layout.reverse .golden-ratio-layout {
    flex-direction: column-reverse;
}
.golden-ratio-layout.reverse > .golden-ratio-layout {
    flex-direction: row-reverse;
}
.golden-ratio-layout.reverse > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: column;
}
.golden-ratio-layout.reverse > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: row;
}

@media screen and (orientation:landscape) {
    .golden-ratio-layout {
        flex-direction: row;
    }

    /* Standard flow */
    .golden-ratio-layout .golden-ratio-layout {
        flex-direction: row;
    }
    .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: column;
    }
    .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: row-reverse;
    }
    .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: column-reverse;
    }

    /* Reverse flow */
    .golden-ratio-layout.reverse {
        flex-direction: row-reverse;
    }
    .golden-ratio-layout.reverse .golden-ratio-layout {
        flex-direction: row-reverse;
    }
    .golden-ratio-layout.reverse > .golden-ratio-layout {
        flex-direction: column-reverse;
    }
    .golden-ratio-layout.reverse > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: row;
    }
    .golden-ratio-layout.reverse > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: column;
    }
}

<div class="top golden-ratio-layout">
    <div class="large-side panel-wrapper" >
        <div class="golden-ratio-panel" >1</div>
    </div>
    <div class="small-side golden-ratio-layout" >
        <div class="large-side panel-wrapper" >
            <div class="golden-ratio-panel" >2</div>
        </div>
        <div class="small-side golden-ratio-layout" >
            <div class="large-side panel-wrapper" >
                <div class="golden-ratio-panel" >3</div>
            </div>
            <div class="small-side golden-ratio-layout" >
                <div class="large-side panel-wrapper" >
                    <div class="golden-ratio-panel" >4</div>
                </div>
                <div class="small-side panel-wrapper" >
                    <div class="golden-ratio-panel" >5</div>
                </div>
            </div>
        </div>
    </div>
</div>

看起来不错吧？

很有可能，这将是所有需要的，因为我们可能不想超过五个面板，但看看当我们添加第六个面板时会发生什么:

* { box-sizing: border-box; }
.top {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/**
*
* GOLDEN RATIO LAYOUT
*
**/

/**
* Default layout is left to right, top to bottom
* To use the Golden Ratio Layout, create a container.
* Within that container, have only two childen.
* The first child should have the class .large-side,
* and the second child should have the class .small-side .
* I suggest nesting layouts on the small side, where the
* element would have .small-side and .golden-ratio-layout .
**/

.golden-ratio-layout {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}
.golden-ratio-layout > .large-side {
    flex: 1.618 1 0%;
}
.golden-ratio-layout > .small-side {
    flex: 1 1 0%;
}
.golden-ratio-layout .panel-wrapper {
    padding: 0;
}
.golden-ratio-layout .golden-ratio-panel {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Standard flow */
.golden-ratio-layout .golden-ratio-layout {
    flex-direction: column;
}
.golden-ratio-layout > .golden-ratio-layout {
    flex-direction: row;
}
.golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: column-reverse;
}
.golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: row-reverse;
}

/* Reverse flow */
.golden-ratio-layout.reverse {
    flex-direction: column-reverse;
}
.golden-ratio-layout.reverse .golden-ratio-layout {
    flex-direction: column-reverse;
}
.golden-ratio-layout.reverse > .golden-ratio-layout {
    flex-direction: row-reverse;
}
.golden-ratio-layout.reverse > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: column;
}
.golden-ratio-layout.reverse > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: row;
}

@media screen and (orientation:landscape) {
    .golden-ratio-layout {
        flex-direction: row;
    }

    /* Standard flow */
    .golden-ratio-layout .golden-ratio-layout {
        flex-direction: row;
    }
    .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: column;
    }
    .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: row-reverse;
    }
    .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: column-reverse;
    }

    /* Reverse flow */
    .golden-ratio-layout.reverse {
        flex-direction: row-reverse;
    }
    .golden-ratio-layout.reverse .golden-ratio-layout {
        flex-direction: row-reverse;
    }
    .golden-ratio-layout.reverse > .golden-ratio-layout {
        flex-direction: column-reverse;
    }
    .golden-ratio-layout.reverse > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: row;
    }
    .golden-ratio-layout.reverse > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: column;
    }
}

<div class="top golden-ratio-layout">
    <div class="large-side panel-wrapper" >
        <div class="golden-ratio-panel" >1</div>
    </div>
    <div class="small-side golden-ratio-layout" >
        <div class="large-side panel-wrapper" >
            <div class="golden-ratio-panel" >2</div>
        </div>
        <div class="small-side golden-ratio-layout" >
            <div class="large-side panel-wrapper" >
                <div class="golden-ratio-panel" >3</div>
            </div>
            <div class="small-side golden-ratio-layout" >
                <div class="large-side panel-wrapper" >
                    <div class="golden-ratio-panel" >4</div>
                </div>
                <div class="small-side golden-ratio-layout" >
                    <div class="large-side panel-wrapper" >
                        <div class="golden-ratio-panel" >5</div>
                    </div>
                    <div class="small-side panel-wrapper" >
                        <div class="golden-ratio-panel" >6</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

没用!

好吧，让我们看看最后的.golden-ratio-layout。

我们可以通过以下方式定位此元素:

.golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: {{ whatever }};
}

如果我们添加该规则，它将得到修复，但是我们将确保我们需要为我们想要支持的每个深度级别添加规则。

那么，我们如何才能支持这些嵌套规则的无限深度级别呢？可能吗？

最佳答案

你有两个问题。

首先是您的 HTML。在您的工作示例中，您重复了 golden-ratio-layout -> panel-wrapper -> golden-ratio-panel 的模式。但是在你的坏例子中，你在最后一级省略了黄金比例布局。添加它会修复故障行为，但不会解决所有问题。

第二个问题是在第四层之后，您将继续在框的顶部添加框 - 您要实现的螺旋不会重复。如果您向背景添加颜色，您可以看到会发生什么。指定第四层黄金比例布局的规则只是重复，您的意图是从第一层开始重复所有四个规则。

为了解决这个问题，我不得不求助于添加一个 reset 类，从第一个 div 开始，每隔四个 div 应用一次。我重写了更改 flex-direction 的 CSS 规则，因此规则中最顶层的类是 reset。如果我能想出如何使用伪选择器，我早就这么做了。

* { box-sizing: border-box; }
.top {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.golden-ratio-layout {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
}
.golden-ratio-layout > .large-side {
    flex: 1.618 1 0%;
}
.golden-ratio-layout > .small-side {
    flex: 1 1 0%;
}
.golden-ratio-layout .panel-wrapper {
    padding: 0;
     box-shadow: 1px 1px 10px 2px #024;
}
.golden-ratio-layout .golden-ratio-panel {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Relevant changes past this point */
/* Standard flow */
.golden-ratio-layout.reset {
    flex-direction: column;
    background: #800;
    color: white;
   
}
.golden-ratio-layout.reset  > .golden-ratio-layout {
    flex-direction: row;
    background: #601;
}
.golden-ratio-layout.reset  > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: column-reverse;
    background: #402;
}
.golden-ratio-layout.reset  > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
    flex-direction: row-reverse;
    background: #203;
}

@media screen and (orientation:landscape) {
    .golden-ratio-layout {
        flex-direction: row;
    }

    /* Standard flow */
    .golden-ratio-layout.reset  {
        flex-direction: row;
    }
    .golden-ratio-layout.reset  > .golden-ratio-layout {
        flex-direction: column;
    }
    .golden-ratio-layout.reset  > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: row-reverse;
    }
    .golden-ratio-layout.reset  > .golden-ratio-layout > .golden-ratio-layout > .golden-ratio-layout {
        flex-direction: column-reverse;
    }
 
}

<div class="top golden-ratio-layout reset">
  <div class="large-side panel-wrapper">
    <div class="golden-ratio-panel">1</div>
  </div>
  <div class="small-side golden-ratio-layout">
    <div class="large-side panel-wrapper">
      <div class="golden-ratio-panel">2</div>
    </div>
    <div class="small-side golden-ratio-layout">
      <div class="large-side panel-wrapper">
        <div class="golden-ratio-panel">3</div>
      </div>
      <div class="small-side golden-ratio-layout">
        <div class="large-side panel-wrapper">
          <div class="golden-ratio-panel">4</div>
        </div>
        <div class="small-side golden-ratio-layout reset">
          <div class="large-side panel-wrapper">
            <div class="golden-ratio-panel">5</div>
          </div>
          <div class="small-side golden-ratio-layout">
            <div class="large-side panel-wrapper">
              <div class="golden-ratio-panel">6</div>
            </div>
            <div class="small-side golden-ratio-layout reset">
              <div class="large-side panel-wrapper">
                <div class="golden-ratio-panel">7</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关于html - 递归 CSS 布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54578637/

文章推荐： ios - 如何以编程方式在 iOS 中获取导航栏高度

文章推荐： Java 8 Streams int 和 Integer

文章推荐： java - 重新加载 java 类中的静态字段

JavaScript 递归
在本教程中，您将借助示例了解 JavaScript 中的递归。递归是一个调用自身的过程。调用自身的函数称为递归函数。递归函数的语法是： function recurse() {
'new'方法中的C#递归
我的类(class) MyClass 中有这段代码: public new MyClass this[int index] { get {
PHP通过FTP下载整个文件夹(递归)
我目前有一个非常大的网站，大小约为 5GB，包含 60,000 个文件。当前主机在帮助我将站点转移到新主机方面并没有做太多事情，我想的是在我的新主机上制作一个简单的脚本以 FTP 到旧主机并下载整个
Java - 递归
以下是我对 AP 计算机科学问题的改编。书上说应该打印00100123我认为它应该打印 0010012但下面的代码实际上打印了 3132123 这是怎么回事？而且它似乎没有任何停止条件？! publi
Kotlin 递归
fun fact(x: Int): Int{ tailrec fun factTail(y: Int, z: Int): Int{ if (y == 0) return z
在C中创建和显示线性链表(递归)
我正在尝试用c语言递归地创建线性链表，但继续坚持下去，代码无法正常工作，并出现错误“链接器工具错误 LNK2019”。可悲的是我不明白发生了什么事。这是我的代码。感谢您提前提供的大力帮助。 #inc
JavaScript 递归？
我正在练习递归。从概念上讲，我理解这应该如何工作(见下文)，但我的代码不起作用。请告诉我我做错了什么。并请解释您的代码的每个步骤及其工作原理。清晰的解释比只给我有效的代码要好十倍。 /* b
Javascript 递归
我有一个 ajax 调用，我想在完成解析并将结果动画化到页面中后调用它。这就是我陷入困境的地方。我能记忆起这个功能，但它似乎没有考虑到动画的延迟。即控制台不断以疯狂的速度输出值。我认为 setIn
JavaScript 递归
有人愿意用通俗易懂的语言逐步解释这个程序(取自书籍教程)以帮助我理解递归吗？ var reverseArray = function(x,indx,str) { return indx == 0 ?
JavaScript 递归
目标是找出数组中整数的任意组合是否等于数组中的最大整数。 function ArrayAdditionI(arr) { arr.sort(function(a,b){ return a -
MySQL用序列化数据连接两个表，递归？
我在尝试获取 SQL 查询所需的所有数据时遇到一些重大问题。我对查询还很陌生，所以我会尽力尽可能地描述这一点。我正在尝试使用 Wordpress 插件 NextGen Gallery 进行交叉查询。
Python:递归
虽然网上有很多关于递归的信息，但我还没有找到任何可以应用于我的问题的信息。我对编程还是很陌生，所以如果我的问题很微不足道，请原谅。感谢您的帮助:) 这就是我想要的结果: listVariations
C练习任务(递归)
我一整天都在为以下问题而苦苦挣扎。我一开始就有问题。我不知道如何使用递归来解决这个特定问题。我将非常感谢您的帮助，因为我的期末考试还有几天。干杯假设有一个包含“n”个元素的整数数组“a”。编写递归函
Javascript 递归
我有这个问题我想创建一个递归函数来计算所有可能的数字 (k>0)，加上数字 1 或 2。数字 2 的示例我有两个可能性。 2 = 1+1 和 2 = 2 ，对于数字 3 两个 poss。 3 = 1+
以Top-Down思维去解决问题——递归
目录递归的基础递归的底层实现（不是重点）递归的应用场景编程中两种解决问题的思维自下而上（Bottom-Up）自上而下（Top-
Python数据结构与算法（4.1）——递归
0. 学习目标递归函数是直接调用自己或通过一系列语句间接调用自己的函数。递归在程序设计有着举足轻重的作用，在很多情况下，借助递归可以优雅的解决问题。本节主要介绍递归的基本概念以及如何构建递归程序。
php - 数组中所有可能的组合 - 递归？
我有一个问题一直困扰着我，希望有人能提供帮助。我认为它可能必须通过递归和/或排列来解决，但我不是一个足够好的 (PHP) 程序员。 $map[] = array("0", "1", "2", "3")
用 dplyr 递归
我有数据 library(dplyr, warn.conflicts = FALSE) mtcars %>% as_tibble() %>% select(mpg, qsec) %>% h
kdb - q - 递归/
在 q 中，over 的常见插图运算符(operator) /是 implementation of fibonacci sequence 10 {x,sum -2#x}/ 1 1 这确实打印了前 1
methods - 递归 - 一个语句中的两个调用
我试图理解以下代码片段中的递归调用。 static long fib(int n) { return n <= 1 ? n : fib(n-1) + fib(n-2); } 哪个函数调用首先被

搜寻专家

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 递归 CSS 布局