Question

我有一个div，里面有六个HTML画布。如何在一个块中水平对齐三个画布，占据屏幕的50％，另外三个画布在添加的图像Struggling to get heroku app live

中对另一个块的底部进行对齐

我当前的代码

<div id="_jscontrol" class="chartjscontrol">
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
<canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
</div>

.chartjscontrol { }

Answer 1

您所要做的就是为public override init(frame: CGRect) { super.init(frame: frame) self.commonInit() } public required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) self.commonInit() } func commonInit() { gradient.colors = [startColor.cgColor, endColor.cgColor] gradient.frame = self.bounds gradient.locations = [0, 1] self.layer.insertSublayer(gradient, at: 0) }元素提供宽度为屏幕三分之一的canvas以及width: 33.333%。

您可以使用float: left和vw代替＆＃39;视口宽度＆＃39;和＆＃39;视口高度＆＃39;分别使元素占据页面总宽度和高度的100％。

在我的示例中，我使用vh仅选择底部的三个元素，创建了20px的边距。我也从每个元素的高度中减去它，以确保它们占据正确的高度。在我的示例中，我还为每个画布添加了一个边框，并考虑了宽度：

＆＃13;

canvas:nth-of-type(n+4)

＆＃13;

.myCanvas {
  display: block;
  float: left;
  width: calc(33.333% - 2px);
  border: 1px solid black;
  height: calc(50vh - 20px);
}

.myCanvas:nth-of-type(n+4) {
   margin-top: 20px;
}

＆＃13;

另请注意，您的示例中有多个<div id="_jscontrol" class="chartjscontrol"> <canvas class="myCanvas"></canvas> <canvas class="myCanvas"></canvas> <canvas class="myCanvas"></canvas> <canvas class="myCanvas"></canvas> <canvas class="myCanvas"></canvas> <canvas class="myCanvas"></canvas> </div> ID，这是无效的标记。我在答案中用类替换了这些：）

希望这有帮助！：）

Answer 2

您可以使用弹性布局和align-self最后3到flex-end

＆＃13;

.chartjscontrol {
  display: flex;
  flex-wrap: wrap;
  width: 1806px;
  height: 1000px;
}

canvas {
  border: 1px solid black;
}

canvas:nth-child(1n+4) {
  align-self: flex-end;
}

＆＃13;

<div id="_jscontrol" class="chartjscontrol">
  <canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
  <canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
  <canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
  <canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
  <canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
  <canvas id="myCanvas" style="display:block" width="600" height="400">
</canvas>
</div>

＆＃13;

我如何使用css水平和垂直地在div中对齐六个画布

2 个答案: