CSS 布局问题，流程图设计答案

【问题标题】：CSS Layout Problems, FlowChart DesignCSS 布局问题，流程图设计
【发布时间】：2016-08-28 20:21:08
【问题描述】：

我需要构建一个动态模板来创建流程图，但只能使用 HTML 和 CSS

查看图片。

黑色 DIV 应具有定义的宽度和高度。
红色 DIV 代表黑色 DIV 中的一行。
绿色 DIV 是带有边框和定义大小的框，高度为 100 像素，宽度为 200 像素。
应该可以将两个或多个绿色 DIV 添加到一个红色 DIV 中（参见黄色矩形）
所有内容应居中对齐（见蓝线）

.page {
position: relative;
width: 800px;
height: 800px;
}

.row{
width: 100%;
text-align: center;
margin-bottom: 10px;
}

.element{
 display: inline-block;
 text-align: center;
 width: 200px;
 height: 50px;
 border: 1px solid #000;
 }

<div class="page">
  <div class="row">
    <div class="element">Start</div>
  </div>
  <div class="row">
    <div class="element">Step_1</div>
    <div class="element">Step_2</div>
  </div>
  <div class="row">
    <div class="element">Step_1_2</div>
  </div>
  <div class="row">
    <div class="element">Ende</div>
  </div>
</div>

也许有人可以帮我实现布局。谢谢

【问题讨论】：

请至少尝试几个 css 显示，以便我们讨论一些事情……您的编辑是一个好的开始，但对您没有多大帮助；）
尝试从developer.mozilla.org/en-US/docs/Web/CSS学习css定位基础
当然，你的权利。但我必须为客户解决问题，而 CSS 不是生意。我没时间了，所以你是我解决问题的最后希望。
也许您需要专业人士并为此向您的客户收费:(

标签： javascript html css layout

【解决方案1】：

我想你正在寻找这样的东西：https://jsfiddle.net/m1pz6zcu/

.page {
  width: 400px;
  height: 400px;
  border-style: solid;
  border-width: 1px;
  text-align: center;
}

.row {
  width: calc(100% - 2px);
  border-style: solid;
  border-width: 1px;
  border-color: red;
  display: flex;
  height: calc(25% - 2px);
}

.element {
  min-width: 20%;
  border-style: solid;
  border-width: 1px;
  border-color: green;
  margin-right: auto;
  margin-left: auto;
  height: 50px;
  height: calc(100% - 2px);
}

【讨论】：