响应树图

Question

响应树图

Fab*_*iyi 0 html css diagram responsiveness

我正在尝试在桌面和移动设备上制作响应式组织结构图，但我的代码遇到了问题。我的图表超出了屏幕的大小，并且不显示滚动来查看图表的其余部分，如下图所示。有没有办法将我的图表放在引导容器中，并且是否有一个 css 框架可以更轻松地制作图表？

这是使用的 css 代码以及 html 代码

.tree,
.tree ul,
.tree li {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.tree {
  margin: 0 0 1em;
  text-align: center;
}

.tree,
.tree ul {
  display: table;
}

.tree ul {
  width: 100%;
}

.tree li {
  display: table-cell;
  padding: .5em 0;
  vertical-align: top;
}

.tree li:before {
  outline: solid 1px #666;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.tree li:first-child:before {
  left: 50%;
}

.tree li:last-child:before {
  right: 50%;
}

.tree code,
.tree span {
  display: inline-block;
  margin: 0 .2em .5em;
  padding: 3.7em .5em;
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background-color: #fefefe;
}

.lineh {
  margin-top: -9px !important;
  margin-bottom: 0px !important;
  border: 0 !important;
  border-top: 2px solid !important;
  width: 159px;
}

.minus-space {
  margin-top: 10px !important;
}

.tree span i {
  font-size: 40px
}

.tree span.level1 {
  background-color: #1e1e1e;
  color: yellow;
  padding: 2em .5em !important;
}

.tree span.level2 {
  background-color: #ffcc01;
  padding: 2em .5em !important;
}

.tree span.linev {
  background-color: #666 !important;
  width: 2px !important;
  border-radius: 0% !important;
  padding: 0px !important;
  margin: 0px !important;
}

.tree ul:before,
.tree code:before,
.tree span:before {
  outline: solid 1px #666;
  content: "";
  height: .5em;
  left: 50%;
  position: absolute;
}

.tree ul:before {
  top: -.5em;
}

.tree code:before,
.tree span:before {
  top: -.55em;
}

.tree>li {
  margin-top: 0;
}

.tree>li:before,
.tree>li:after,
.tree>li>code:before,
.tree>li>span:before {
  outline: none;
}

Run Code Online (Sandbox Code Playgroud)

<div class="container-fluid">
  <ul class="tree">
    <li><span class="level1"><i class="mdi mdi-bank"></i><br><b>Group board</b></span>
      <ul>
        <li><span class="level2"><i class="mdi mdi-bank"></i><br><b>Board committees</b></span>
          <ul>
            <li> <span>Audit</span>
            </li>
            <li> <span>Remuneration and human ressources</span>
            </li>
            <li> <span class="linev"></span>
              <ul>
                <li> <span class="level2"><i class="mdi mdi-bank"></i><br><b>Compliance
                                            committees</b></span>
                </li>
                <li> <span class="linev"></span>
                  <ul>
                    <li><span>Group searching</span></li>

                    <li><span>Group operation</span></li>

                    <li><span>Strategic talent</span></li>

                    <li><span>Group treasure</span></li>

                    <li><span>Group transformation</span></li>

                  </ul>
                </li>
                <li> <span class="level2"><i class="mdi mdi-bank"></i><br><b>Executive
                                            committees</b></span>
                </li>
              </ul>
            </li>
            <li> <span>Social ethics</span>
            </li>
            <li> <span>Nominations</span>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

Run Code Online (Sandbox Code Playgroud)

谢谢你的所有建议

Answer 1

Ren*_*nde 5

对于这个答案，我使用了一些“仅限 CSS”的流程图代码。此代码是完全响应式的，并且设计为多用途和可重用的。实际上，我采用了代码并基本上重写了它，以使其满足您的要求并且更具开发人员可读性（不仅仅是我）。

CSS 主要使用独立属性而不是UL/LI特定属性，一般来说，这些属性的优先级低于使它们易于覆盖的优先级。属性也很容易从 Javascript 访问。.classes<tag>data-*.classesdata-*

对于定位和响应，代码严重依赖flexbox 布局。

代码已完全注释，包括：

规范，如何使用数据属性data-chart，data-knot('branch','node','step') 和data-symbol.
所用代数的解释，直线的定义：' y=mx+b '，用于响应性和缩放font-size's, width's, height's 和间距 ( padding, margin)。您可以在mathisfun（无附属机构）上找到易于理解的参考资料。
规则在功能（机制与样式）之后拆分，以便于扩展和主题化。
一些提示、替代用途、怪癖（IE11）。
一些眼睛糖果，只是因为我可以......

简要总结

data-chart 使用的图表类型，目前只有“OC”（组织结构图）。
data-knot指定之间使用的连接类型data-symbols。
- data-knot="branch" （容器）
- data-knot="node" （横线）
- data-knot="step" （垂线）
- data-knot="node.step" （十字线）
data-symbol装有描绘某些组织功能的图形和文字的容器。目前只有一个彩色圆圈，但可以扩展以容纳更多内容（例如可折叠卡片，其原始用途）。
“着陆页”就像响应式页面间距[band]（320 像素屏幕上的 8 像素，1920 像素屏幕上的 320 像素）。
文档阅读方向[dir="ltr"]与[dir="rtl"]就绪（用于<body>）。
两个调试助手规则outlines和hover（在中使用<body>）。

各种嵌套和树结构都是可能的，此处显示的一种与 OP 所需/请求的响应图表完全匹配（据我所知......）。

已特别注意使图表适合“360x640px”智能手机（纵向）以及“1920x1200px”桌面显示器（横向，我自己的 24 英寸）。

目前，此代码仅可从此 Stackoverflow 问题获得。一个（更详细的）codepen 版本正在进行中......

笔记

你很可能完全不喜欢我对代码所做的事情，或者只是有其他要求而不是我解释的。在这种情况下，不要对答案投反对票，而只是忽略它，因为其他人可能会发现它仍然有用。

额外的“ERS线性方程”

我在 GeoGebra 上创建的在线工具ERS 线性方程将极大地简化为您的 CSScalc()函数找到合适的响应方程。该工具显示了代码中使用的方程的 4 个预定义函数。确保你试一试（没有附属机构，个人工作，免费，分叉，使用，滥用）......

代码段中的代码经过测试，可以在W10 上使用 Chrome、Edge、Firefox 和 IE11（+IE10 模式）以及在 Android 9+ 上使用默认浏览器和 Firefox。由于缺乏设备，没有苹果的结果。

/******************************/
/* general global preferences */
/******************************/
html,body             { box-sizing: border-box } /* [MANDATORY] all size calcs must include padding and border */
*::before,*::after, * { box-sizing: inherit    } /* [MANDATORY], ditto, but it WILL inherit any changes */
/*
    responsive fontsize:
    p1(320,14) p2(1280,20) => 0.00625x + 12

    Assumes 16px browser default fontsize and uses
    REM to adapt to user modified font settings

    In the remainder of this <style> sheet you will find 
    an explanation of the algebra used in this document.
*/
html        { font-size: calc(0.625vmin + 0.75rem) }
body        { width: 100%; height: 100%; margin: 0; cursor: default;

              font-size: 1rem;
              font-family: Roboto,Arial,Helvetica,sans-serif;

              background-color: Gainsboro; color: black }

h1          { font-size: 2rem } /* Override of FF+ default nesting behaviour */

/* generic flexbox shortcuts */
[F]         { display: flex }
[R]         { flex-direction: row    } /* horizontal: row of 1:N columns (FBL default) */
[C]         { flex-direction: column } /* vertical: column of 1:N rows   */
[W]         { flex-wrap: wrap }

/* Prevents (inadverted) text selection by user (when double, double clicking) */
[no-select] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
              user-select: none; -moz-appearance : none; -webkit-appearance: none }

/* Show element outlines for debugging (use in <body> tag) */
[outlines="1"] * { outline: 1px dashed purple }

/* Color to show nesting level for debugging (use in <body> tag) */
[hover="1"] :not(section) :hover { background-color: rgba(255,0,0,.2) }

/*
    KNOT LOGIC
    'branch' - 1:N 'node',1:N 'node.step' and 1:N 'step'
    'node'   - 1:N 'node' and 1:N 'step'
    'step'   - 1 data-symbol

    You can use flexbox shortcut attributes R (horizontal) and C (vertical) to 
    determine the nesting direction of 'branch'es and 'node's. (R) is optional
    as horizontal is the default direction. 

    (Depending on orientation of the knots, all kinds of nestings might work,
     but that will require trial and error, fiddling.)

    SPECIFICATIONS
    1) 'branch' has no specific rules, but acts as a container for 'node's
       and to distinguish from 'node' and 'step'. 
       Add your own rules for specific 'branch' styling like fonts,colors,border,spacing.

    2) 'node' and 'step' only use :before and :after to position and draw
       connecting lines.

       'node'      horizontal line attachement
       'step'      vertical
       'node.step' both

    3) 'node.step' can be empty (no 'data-symbol'), in which case it will only
       draw cross lines.

    4) 'start' and 'stop' values are used to prevent drawing of
       starting and ending lines.

    5) Knot 'lft', 'ctr' and 'rgt' values define how sibling nodes are connected
       'lft' - left hand node, only one
       'ctr' - center nodes, can be more than one 
       'rgt' - right hand node, only one

    My motivation for use of 'data-* attributes' instead of classes is they
    are easy accessible as javascript variables:

    someElement.dataset.chart
    someElement.dataset.knot
    someElement.dataset.symbol
    
*/

/***************/
/* Chart Setup */
/***************/
/* If you want the knots distributed as-is, remove 'align-items' */
[data-chart]        { display: flex; align-items: center } /* [OPTIONAL], try! */
[data-knot]         { display: flex; flex-grow: 1 }        /* [MANDATORY] */

/* default alignments */
[data-knot]         { justify-content: center }
[data-knot*="node"] { align-items: stretch    }
[data-knot*="step"] { align-items: flex-start } 

/* this code keeps the lines connect to the symbols */
[data-knot]         { position: relative; z-index: 1 } /* new stacking context */
[data-knot]:before,
[data-knot]:after   { position: absolute; z-index: -1; content: '' }
/* put some character in 'content' to keep track when debugging */

/* Horizontal lines ('node') setup */
[data-knot]:before  { top   :  1px } /* adjust -+1 for thickess of outlines */
[data-knot]:after   { bottom: -1px }

[data-knot*="node"]:before,[data-knot*="node"]:after
{ height: 0px /* for IE11 */; width: 50% }

/* Vertical lines ('step') setup */
[data-knot*="step"]:before,[data-knot*="step"]:after
{ width: 0px /* for IE11 */; left: 50%; right: 50% }

/* positioning of the lines ('lft','ctr','rgt') */
[data-knot*="ctr"]:before,[data-knot*="ctr"]:after
{ width: 100%; left: 0 }

/* (EITHER) Handles document reading direction (dir="ltr" in <body>) */
[dir="ltr"] [data-knot*="lft"]:before, [dir="ltr"] [data-knot*="lft"]:after { left : 50% }
[dir="ltr"] [data-knot*="rgt"]:before, [dir="ltr"] [data-knot*="rgt"]:after { right: 50% }
[dir="rtl"] [data-knot*="lft"]:before, [dir="rtl"] [data-knot*="lft"]:after { right: 50% }
[dir="rtl"] [data-knot*="rgt"]:before, [dir="rtl"] [data-knot*="rgt"]:after { left : 50% }

/* (OR) For use without [dir]
[data-knot*="lft"]:before, [data-knot*="lft"]:after { left : 50% }
[data-knot*="rgt"]:before, [data-knot*="rgt"]:after { right: 50% }
*/

/* line coloring */
[data-knot*="node"]:before,[data-knot*="node.step"]:after,
[data-knot*="step"]:before,[data-knot*="step"]:after { outline: 1px solid #666 }

/* no line drawing cases */
[data-knot="step"]:after, /* notice the missing '*' */
[data-knot*="start"]:before ,[data-knot*="stop"]:after { outline: none }

/*
    responsive sizes: T/B p1(320,6) p2(1280,24) and L/R p1(320,4) p2(1280,16)
    modify these to meet specific requirements.
*/
[data-knot*="step"]         { padding: 1.875vmin 1.25vmin }
[data-knot*="step"]:before  { height : 1.875vmin }              /* Same height as [data-step] T/B padding */
[data-knot*="step"]:after   { height : calc(100% - 1.875vmin) } /* pct to from below (minus T/B padding) */

/****************/
/* Symbol Setup */
/****************/
/*
    Chart 'data-symbol's, flexbox intended use

    FBL (V)     FBL (H)      Any
    --------    -------      -------
    (S)ymbol -> (H)eader  -> content
             -> (C)ontent -> content
             -> (F)ooter  -> content
*/
[data-symbol],
[data-symbol]>*         { display: flex }   /* S,H,C,F are flexbox parent containers */
[data-symbol]>*>*       { flex-grow: 1 }    /* sets default to 'fill' for content of H,C,F */

[data-symbol]           { flex-direction: column  } /* a column of 1:N rows */
[data-symbol]>.header   { align-items: center }

/* styling */
[data-symbol]           { text-decoration: none; color: currentColor; background-color: transparent }

[data-symbol]>.header {
    padding: .25rem .5rem; text-align: center; border-radius: 50%;

    /* responsive sizes: p1(320,50) p2(1920,180) */
    width : calc(8.125vmin + 24px);
    height: calc(8.125vmin + 24px);

    /*
        responsive fontsize: p1(320,6) p2(1920,20)
        Whether this works as expected depends on the minimum browser
        fontsize set by the user (content may overflow .header when set >6px)

        Tested defaults on W10:
        Edge2020 overflows, while Chrome, Firefox and IE11 do not
    */
    font-size: calc(.875vmin + 3.2px)
}

[clr="0"]       { background-color: Gainsboro; color: black }
.header,        /* .header here saves coding html */
[clr="1"]       { background-color: #fefefe; color: #1e1e1e }
[clr="2"]       { background-color: #1e1e1e; color: Yellow ; font-weight: bolder }
[clr="3"]       { background-color: #ffcc01; color: #1e1e1e; font-weight: bolder }

/**************************************/
/* Google Material Component inspired */
/**************************************/
[icon] {
    display: inline-flex;
    justify-content: center; align-content: center; align-items: center;

    /* responsive sizes: p1(320,14) p2(1280,32) */
    width      : calc(1.875vmin + 8px);
    height     : calc(1.875vmin + 8px);
    line-height: calc(1.875vmin + 8px);
    font-size  : calc(1.875vmin + 8px);
    /*
        A bit overdone for just one icon, use inline SVG instead,
        or create a small (subset) iconfont at https://icomoon.io

        icon list: https://material.io/resources/icons/?style=baseline
    */
    font-family: 'Material Icons';

    font-weight: normal; font-style: normal; letter-spacing: normal;
    text-transform: none; white-space: nowrap; word-wrap: normal;

    opacity: 1; /* GMC uses <1 here and 1 on :hover */

    -moz-font-feature-settings: 'liga';
    font-feature-settings     : 'liga';
    -moz-osx-font-smoothing   : grayscale;
}

/******************/
/* simple banding */
/******************/
[band] { display: flex; flex-flow: row wrap;
         justify-content: center; align-content: center;
         padding: calc(5vh + 48px) calc(19.5vw - 54.4px) }
/*
    responsive padding
    T/B: p1(320,64) p2(1920,144) => y = 0.5x   + 48
    L/R: p1(320, 8) p2(1920,320) => y = 0.195x - 54.4

    This construction keeps content nicely center aligned within
    given space.
*/
/* [OPTIONAL] */
@media screen and (max-width: 319px) { [band] { padding: 1.5rem   8px } }
@media screen and (min-width:1921px) { [band] { padding: 1.5rem 320px } }

/***********************/
/* Some extra eyecandy */
/***********************/
[data-symbol]>.header {
    box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
                0px 1px 1px  0px rgba(0,0,0,.14),
                0px 1px 3px  0px rgba(0,0,0,.12);   /* GMC elevation 1dp */
}
[data-symbol]>.header:hover:not(:focus)  { transform: scale(1.01) }
[data-symbol]>.header:active:not(:focus) { transform: scale(0.995);
    box-shadow: 0px 3px  5px -1px rgba(0,0,0,.2),
                0px 5px  8px  0px rgba(0,0,0,.14),
                0px 1px 14px  0px rgba(0,0,0,.12);  /* GMC elevation 5dp */
}
[data-symbol]>.header:hover {
    box-shadow: 0px 3px  5px -1px rgba(0,0,0,.2),
                0px 6px 10px  0px rgba(0,0,0,.14),
                0px 1px 18px  0px rgba(0,0,0,.12);  /* GMC elevation 6dp */
}
/*
    ALGEBRA for responsive sizing

    ALL responsive sizes in this document use the 'point-slope' variation
    of the 'definition of a straight line: y=mx+b':
    (https://www.mathsisfun.com/algebra/line-equation-point-slope.html)

    y - y1 = y1 + m(x - x1) <=> y = y1 + m(x - x1)

    For points:
    p1 = (x1,y1) - size at minimum viewport size (x1 default  320px)
    p2 = (x2,y2) - size at maximum viewport size (x2 default 1280px)
    (using 320px and 1280px will create a full step each 160px)

    where:
    m = (y2 - y1) / (x2 - x1) ('Slope')
    x = fixed value of 100vmin, 100vh or 100vw ('X-intercept')
    b = y1 - (m * x1) ('Y-intercept')

    X-axis = viewport size
    Y-axis = element size

    Substituted equation to use:
    y = y1 + (y2 - y1) / (x2 - x1) * (x - x1)

    NOTES
    - Use VMIN for viewport width/height independed results (like fonts)
    - Use VW/VH for viewport width/height dependend results (width,height,margin,padding)
    - Do not use VMAX for x, it will yield results that are to large.

    EXTRA
    Helpfull hands-on graphical tool/demo I created on GeoGebra
    'ERS linear equations' https://www.geogebra.org/m/gct3bvsp
    (E)asy (R)esponsiveness (S)system
*/

Run Code Online (Sandbox Code Playgroud)

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" crossorigin="anonymous">
<body dir="ltr" no-select hover="0" outlines="0">

    <section band>
        <div data-chart="OC" C>

            <div data-knot="branch" C>
                <div data-knot="node.step.start">
                    <div data-symbol>
                        <div class="header" clr="2"><div><i icon>account_balance</i><br>Group Board</div></div>
                    </div>
                </div>
                <div data-knot="node.step">
                    <div data-symbol>
                        <div class="header" clr="3"><div><i icon>account_balance</i><br>Board Committees</div></div>
                    </div>
                </div>
            </div>


            <div data-knot="branch">
                <div data-knot="node.lft">
                    <div data-knot="step">
                         <div data-symbol>
                            <div class="header"><div>Audit</div></div>
                        </div>
                    </div>
                </div>
                <div data-knot="node.ctr">
                    <div data-knot="step">
                        <div data-symbol>
                            <div class="header"><div>Remuneration and Human Resources</div></div>
                        </div>
                    </div>
                </div>
                <div data-knot="node.ctr">
                    <div data-knot="node.step"><!-- empty data-knot for vertical line --></div>
                </div>
                <div data-knot="node.ctr">
                    <div data-knot="step">
                        <div data-symbol>
                            <div class="header"><div>Social Ethics</div></div>
                        </div>
                    </div>
                </div>
                <div data-knot="node.rgt">
                    <div data-knot="step">
                        <div data-symbol>
                            <div class="header"><div>Nominations</div></div>
                        </div>
                    </div>
                </div>
            </div>


            <div data-knot="branch">
                <div data-knot="node.lft">
                    <div data-knot="step">
                        <div data-symbol>
                            <div class="header" clr="3"><div><i icon>account_balance</i><br>Compliance Committee</div></div>
                        </div>
                    </div>
                </div>
                <div data-knot="node.ctr">
                    <div data-knot="node.step"></div>
                </div>
                <div data-knot="node.rgt">
                    <div data-knot="step">
                        <div data-symbol>
                            <div class="header" clr="3"><div><i icon>account_balance</i><br>Executive Committees</div></div>
                        </div>
                    </div>
                </div>
            </div>


            <div data-knot="branch">
                <div data-knot="node.lft">
                    <div data-knot="step">
                         <div data-symbol>
                            <div class="header"><div>Group Searching</div></div>
                        </div>
                    </div>
                </div>
                <div data-knot="node.ctr">
                    <div data-knot="step">
                        <div data-symbol>
                            <div class="header"><div>Group Operation</div></div>
                        </div>
                    </div>
                </div>
                <div data-knot="node.ctr">
                    <div data-knot="node.step.stop">
                        <div data-symbol>
                            <div class="header"><div>Group Talent</div></div>
                        </div>
                    </div>
                </div>
                <div data-knot="node.ctr">
                    <div data-knot="step">
                        <div data-symbol>
                            <div class="header"><div>Group Treasure</div></div>
                        </div>
                    </div>
                </div>
                <div data-knot="node.rgt">
                    <div data-knot="step">
                        <div data-symbol>
                            <div class="header"><div>Group Transformation</div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</body>

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，11 月前
查看次数：	2354 次
最近记录：	5 年，11 月前