複数のオブジェクトをCSSで隣接してセンタリング

Question

私はお互いに隣接して表示したいキャンバスを複数持っています。私はCSSに最も精通しているわけではありませんが、それぞれを特定の浮動小数点の下に置いてdivに配置しようとしました（canvas_leftは左に浮動、canvas_centerはキャンバスの中心に設定され、canvas_rightは浮動小数点に設定されます） 。なんらかの理由で、私はそれらをすべてスクリーンに水平に配置して隣接させることはできません。

CSS：

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

HTML：

<div class="center"> 
    <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> 

あなたがこの問題を解決する方法を知っている場合は、私に知らせてください。

Answer 1

私はflexboxesを使用することをお勧め、あなたが行うことができますそれはほとんど何でも。

コンテナクラスは子供のものと同じである。また、あなたがそれを変更する必要があり、そのような：

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

すべてcanvasタグをフロートする必要があります。あなたのCSSを変更します。

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

しかし、表示幅を変更する際に、キャンバスのタグが再びお互いの下に整列されることに注意してください。

遊ぶhereです。

Answer 3

私はこれを達成したいと思っています。

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> 

Answer 4

何フロートセンターはありません。メインキャンバスが浮動小数点ブロックであるため、レイアウトが機能しません。

浮動小数点の使用はおそらく悪い考えです。より良い使用インラインブロック：

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

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

あるいはフレキシボックス、それを行うには近代的な方法：

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

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