divでレイアウトが崩れる

htmlで左にグラフ、右に文字列で最大値と最小値を縦並びで表示させたいのですがどうしてもうまくいきません。
グラフ等の表示には問題がないのでjavascript部分は割愛しています。レイアウト部分を教えてください。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="style.css">
6    <title>テスト</title>
7</head>
8<body>
9    <div align="center" style="font-size:18pt;">グラフ</div>
10    <div class="main" style="width: auto;">
11        <div class="box1">
12            <canvas id="Chart1"></canvas>
13        </div>
14        <div class="box2">
15            <canvas id="Chart1_max"></canvas>
16            <canvas id="Chart1_min"></canvas>
17        </div>
18        <div class="box3">
19            <canvas id="Chart2"></canvas>
20        </div>
21        <div class="box4">
22            <canvas id="Chart2_max"></canvas>
23            <canvas id="Chart2_min"></canvas>
24        </div>
25    </div>
26    <script>
27    // chart1グラフ描画
28    var ctx = document.getElementById("Chart1").getContext("2d");
29    // 割愛
30    </script>
31
32    <script>
33    var ctx = document.getElementById("Chart1_max").getContext("2d");
34    document.write("MAX値:");
35    </script>
36    <br>
37    <script>
38    var ctx = document.getElementById("Chart1_min").getContext("2d");
39    document.write("MIN値:");
40    </script>
41
42    <script>
43    // chart2グラフ描画
44    var ctx = document.getElementById("Chart2").getContext("2d");
45    // 割愛
46    </script>
47    <br>
48    <script>
49    var ctx = document.getElementById("Chart2_max").getContext("2d");
50    document.write("MAX値:");
51    </script>
52    <br>
53    <script>
54    var ctx = document.getElementById("Chart2_min").getContext("2d");
55    document.write("MIN値:");
56    </script>
57</body>
58</html>
59

css
1.box1, .box3{width: 80%; height: auto; text-align: center; float: left; margin-left: 10px;}
2.box2, .box4{width: auto; height: auto; float: none;}

m.ts10806

2021/04/21 01:11

どのようにしたいために組んでどうなってしまっているのか具体的に（できれば画面イメージやキャプチャ）提示してください

Lhankor_Mhy

2021/04/21 01:36

「最大値と最小値」とは、コード中のどの要素のことですか？

Lhankor_Mhy

2021/04/21 01:38

あ、#Chart1_max とかのことでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

以下のようにするとどうでしょうか？

css
1canvas{
2  display: block;
3}

投稿2021/04/21 01:39

Lhankor_Mhy

総合スコア36158

退会済みユーザー

2021/04/21 02:26

cssに追加してみましたが何も変化がありませんでした。

Lhankor_Mhy

2021/04/21 02:36

当方の環境では変化がありましたので、ご提示いただいていない部分に原因があるのかもしれませんね。

Lhankor_Mhy

2021/04/21 03:05

ご提示のコードでサンプルを作成しました。 https://jsfiddle.net/Lhankor_Mhy/8n3g27at/ chagamaさんの環境では、上記のページでも「左にグラフ、右に文字列で最大値と最小値を縦並びで表示」とはなりませんか？もし、ならないのであれば、環境の問題かもしれません。

退会済みユーザー

2021/04/21 08:32 編集

Lhankor_Mhyさんのおっしゃる通り、提示していないJavaScriptの部分が問題でした。 JavaScript部分を追記しました。 <script> var ctx = document.getElementById("Chart1_max").getContext("2d"); document.write("MAX値:"); </script> この書き方がいけなかったようです。これを var ctx = document.getElementById("Chart1_max").innerHTML = "MAX値:"; に変更したら左にグラフ、右の位置に文字列がくるようになりました。

退会済みユーザー

2021/04/21 08:54

文字列がグラフの右側に来るようになったのでCSSの中身を変更してみたのですが、ブラウザを縮小したり、スマホで確認すると2つ目のグラフのMAX値とMIN値の文字列（box4）がグラフの横にはなく、下の方に行ってしまいます。position: absoluteを使用したのがいけないようです。スマホで見てもグラフの横に文字列が来るようにするにはどうすればいいでしょうか？ .box1, .box3{width: 80%; height: auto; text-align: center; float: left; margin-left: 10px;} .box2{width: auto; height: auto; float: none; position: absolute; top: 30%; margin-left: 81%;} .box4{width: auto; height: auto; float: none; position: absolute; top: 110%; margin-left: 81%;}

Lhankor_Mhy

2021/04/22 00:50

絶対配置では難しいでしょうね。

退会済みユーザー

2021/04/22 12:28

そういうもんなんですか。諦めます。

行動規範の内容に同意します