html - 在 CSS 中复制图像流程图

Question

我有一个流程图，它最初是一个图像，应该足够简单，可以转换成 CSS，但由于我在 CSS div 操作方面没有什么技巧，我希望 Stack Overflow 的向导能提供帮助。

我正在尝试在 CSS 中复制上面的图像。它不必看起来完全一样，但我希望保持基本布局相同。

我试了一下第二列和第三列，只是想看看我是否能弄清楚那部分，但我似乎无法让第二列中的第二项与第二列。

如果有人能帮我解决那部分问题，我将永远感激不尽。

.RoleContainerTop {
  border: 1px black solid;
  margin: auto;
  text-align: center;
  width: 100px;
  margin: 20px;
  float: left;
}
.RoleContainerMiddle {
  border: 1px black solid;
  margin: auto;
  text-align: center;
  width: 100px;
  margin-top: 75px;
  float: left;
}
.RoleContainerBottom {
  border: 1px black solid;
  margin: auto;
  text-align: center;
  width: 100px;
  margin-top: 150px;
  float: left;
}
.RoleContainer p {
  text-align: center
}

<div>
  <div>
    <div class="RoleContainerTop">
      <p>
        Abracadabra
      </p>
    </div>
    <div class="RoleContainerMiddle">
      <p>
        Shazam
      </p>
    </div>
    <div class="RoleContainerBottom">
      <p>
        Alakazam
      </p>
    </div>
  </div>
</div>

Answer 1

我会做这样的事情。关键是创建可变宽度的列，从那里开始就非常简单了。我选择了百分比宽度，但您可以随心所欲。

我还建议您稍微巩固一下您的 css :)。您正在重复大量在类似元素之间共享的代码。

CSS:

* {
  box-sizing: border-box;
}

.column-25 {
  width: 25%;
  padding: 10px;
  float: left;
}

.column-25:last-child {
  float: right;
}

.block {
  width: 100%;
  height: 60px;
  margin-bottom: 20px;
  border: 1px solid #000;
}

.block.center {
  margin-top: 40px;
}

HTML:

<div class="container">
  <div class="column-25">
    <div class="block"></div>
  </div>
  <div class="column-25">
    <div class="block"></div>
    <div class="block"></div>
  </div>
  <div class="column-25">
    <div class="block center"></div>
  </div>
  <div class="column-25">
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>

从这里开始，如果您愿意，您可以使用一些 :before/:after 魔法来查看绝对定位元素以创建箭头。

jsfiddle demo