Question

我需要创建可以在此处显示与此设计图像类似的内容的CSS类：design concept

显然，代码声明本身并不重要。但是，如何创建可以包装图像中所包含内容的CSS并将其用于嵌套容器？我一直在使用div标签和显示：内联块样式但没有任何结果。

这是我目前使用的Flex-box。这几乎是我所需要的，除了＆＃34;行＆＃34;没有设置它们的宽度以适应文本内容，因为它只是将所有内容的宽度设置为最大宽度的子项...似乎这种方法可能无法实现。

＆＃13;

.container {
  display: inline-flex;
  flex-direction: column;
  padding-left: 15px;
}

.containerRow {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 35px;
  margin: 5px;
}

.dropContainer {
  height: 70px;
  border: 1px solid #ccc!important;
  background-color: white;
  color: black;
}

.purple {
  background-color: #872A61;
  color: white;
}

.green {
  background-color: #478B26;
  color: white;
}

＆＃13;

<div class="container purple">
  <div class="containerRow">
    if (something == true) then
  </div>

  <div class="container green">
    <div class="containerRow">
      <div><b>where</b> something(x: Number, y:Number) <b>is</b></div>
    </div>

    <div class="dropContainer">
      Some more stuff again
    </div>

    <div class="dropContainer">
      Some more stuff again
    </div>

    <div class="containerRow">
      <b>end</b>
    </div>

  </div>

  <div class="containerRow">
    <b>end</b>
  </div>
</div>

＆＃13;

Answer 1

使用百分比的边距或填充样式来实现第n个术语。

如何创建嵌套的codeblock样式css

1 个答案: