Html 在CSS中复制图像流程图

我有一个流程图，它最初是一个图像，应该足够简单，可以翻译成CSS，但由于我在CSS div操作方面没有什么技能，我希望堆栈溢出向导能有所帮助

我试图用CSS复制上面的图像。它不必看起来完全一样，但我想保持基本布局不变

我尝试了第二列和第三列，只是想看看我是否能弄清楚这一部分，但我似乎无法使第二列中的第二项与第二列中的第一项对齐

如果有人能帮我这一部分，我将永远感激

.RoleContainerTop{
边框：1px黑色实心；
保证金：自动；
文本对齐：居中；
宽度：100px；
利润率：20px；
浮动：左；
}
.RoleContainerMiddle{
边框：1px黑色实心；
保证金：自动；
文本对齐：居中；
宽度：100px；
边缘顶部：75px；
浮动：左；
}
.RoleContainerBottom{
边框：1px黑色实心；
保证金：自动；
文本对齐：居中；
宽度：100px；
边缘顶部：150px；
浮动：左；
}
.RoleContainer p{
文本对齐：居中
}

阿布拉卡达拉


沙扎姆


富迪

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

我还建议您稍微整合一下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;
}

<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>

HTML:

* {
  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;
}

<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向导查看绝对定位元素，以创建箭头（如果您愿意）

---

非常感谢，这太完美了！对不起，我要问你一个问题；似乎没有“容器”的样式类。当我尝试将此代码嵌入控件并将其放置在页面中时，它不会“填充”该区域。我怀疑这是因为我在容器类中遗漏了一些东西。你能帮忙吗？我想出来了--我给容器分区增加了一个高度，现在它按预期工作。酷，很高兴你得到了它。在您的案例中，您甚至可能不需要容器，只需要一些东西来包装这些列。