Question

我想要彼此相邻显示多个画布。我不熟悉CSS，但我尝试将它们全部放在一个居中的div中，每个div都在一个特定的float下（canvas_left设置为float左，canvas_center设置为canvas中心，或canvas_right设置）向右浮动）。出于某种原因，我无法将它们全部放到相邻位置并在屏幕上水平居中。

CSS：

python -m pip uninstall lxml
python -m pip install lxml==3.6.0

HTML：

.left {
    display: block;
    float: left;
}
.center {
    display: block;
    margin: auto;
}
.right {
    display: block;
    float: right;
}

如果你知道如何解决这个问题，请告诉我。

Answer 1

没有漂浮中心。您的布局不起作用，因为主画布是非浮动块。

无论如何，使用浮动可能是一个坏主意。更好地使用内联块：

＆＃13;

.wrapper {
  text-align: center;
}
canvas {
  border: 1px solid;
  width: 25%;
  display: inline-block;
}

＆＃13;

<div class="wrapper">
  <canvas id="canvas_left"></canvas>
  <canvas id="canvas_main"></canvas>
  <canvas id="canvas_right"></canvas>
</div>

＆＃13;

或Flexbox，现代化的方式：

＆＃13;

.wrapper {
  display: flex;
  justify-content: center;
}
canvas {
  border: 1px solid;
  width: 25%;
}

＆＃13;

<div class="wrapper">
  <canvas id="canvas_left"></canvas>
  <canvas id="canvas_main"></canvas>
  <canvas id="canvas_right"></canvas>
</div>

＆＃13;

Answer 2

我建议使用flexbox，你几乎可以做任何事情。

容器类也与子类相同，你应该改变它，如下所示：

<div id="canvas">
  <canvas id="canvas_left" class="left" width="150px" height="400px"></canvas>
  <canvas id="canvas_main" class="center"></canvas>
  <canvas id="canvas_right" class="right" width="150px" height="400px"></canvas>
</div>


#canvas {
  display: flex;
  justify-content: center;
}
.left { background: green; flex-shrink: 0; }
.center { background: blue; flex-shrink: 0; }
.right { background: purple; flex-shrink: 0; }

JSfiddle：jsfiddle.net/8uv2zowm

Answer 3

您需要浮动所有canvas代码。改变你的CSS：

.left {
    display: block;
    float: left;
}
.center {
    display: block;
    margin: auto;
    float: left;
}
.right {
    display: block;
    float: left;
}

但请注意，在更改显示宽度时，canvas标签将再次在彼此之间对齐。

玩here。

Answer 4

我认为这就是你想要实现的目标。

CSS

.container {
  float: left;
}
.left {
    display: inline-block;
    width: 150px;
    height: 400px;
    background-color: red;
}
.center {
    display: inline-block;
    width: 150px;
    height: 400px;
    background-color: blue;
}
.right {
    display: inline-block;
    width: 150px;
    height: 400px;
    background-color: green;
}

HTML

<div class="container">
    <canvas id="canvas_left" class="left"></canvas>
    <canvas id="canvas_main" class="center"></canvas>
    <canvas id="canvas_right" class="right"></canvas>
</div>

使用CSS将多个对象相邻

4 个答案: