Question

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

我试图在CSS中复制上面的图片。它不必看起来完全相同，但我想保持基本布局相同。

我已经对第二和第三列进行了尝试，看看我是否能够弄明白这一部分，但我似乎无法获得第二列中的第二项与之对齐第二栏中的第一项。

如果有人可以帮我解决这个问题，我会永远感激。

＆＃13;

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

＆＃13;

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

＆＃13;

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>

从这里开始，您可以通过以下方式查看绝对定位的元素：在魔术之前/之后，如果您愿意，可以创建箭头。

jsfiddle demo

在CSS中复制图像流程图

1 个答案: