三つの要素を添付画像のように、横に並べたい

添付画像のように、三つの要素をボーダー付きで、並べたいです。

下記のコードを含めて、いろいろと試してみましたが、なかなかうまくできません。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>DashBoard</title>
6    <link rel="stylesheet" href="stylesheet.css">
7  </head>
8  <body>
9    <!-- ここからHTMLを書き始めてください -->
10    <div class="three_indicators">
11        <div class="session">
12          <p>セッション数<p>
13          <p>1000<p>
14        </div>
15        <div class="new">
16          <p>新規<p>
17          <p>800<p>
18        </div>
19        <div class="repeater">
20          <p>リピーター</p>
21          <p>200</p>
22        </div>
23    </div>
24  </body>
25</html>

css
1.three_indicators{
2  padding-left:200px;
3}
4.session{
5    text-align: center;
6    float: left;
7    padding-right:200px;
8    border:solid 1px;
9    font-size: 35px;
10}
11
12.new{
13    text-align: center;
14    float: left;
15    padding-right:200px;
16    border:solid 1px;
17    font-size: 35px;
18}
19
20.repeater{
21    text-align: center;
22    float: left;
23    border:solid 1px;
24    font-size: 35px;
25}

ご教授のほど、お願いいたします。

yoshinavi

2019/06/21 03:19

3つの要素は、同じ幅にするのでしょうか？「リピーター」の要素だけpadding-rightが無い理由は何でしょうか

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

回答2件

ベストアンサー

flexboxを使うとシンプルに並べられると思います。

css
1.three_indicators{
2  display: flex;
3  font-size: 35px;
4  text-align: center;
5}
6
7.session{
8    flex: 1;
9    border:solid 1px;
10}
11
12.new{ 
13    flex: 1;
14    border:solid 1px;
15}
16
17.repeater{
18    flex: 1;
19    border:solid 1px;
20}

投稿2019/06/21 03:10

aruto

総合スコア175

<p>の閉じタグがないため直しておきました。

HTML
1<div class="three_indicators">
2  <div class="session">
3    <p>セッション数</p>
4    <p>1000</p>
5  </div>
6  <div class="new">
7    <p>新規</p>
8    <p>800</p>
9  </div>
10  <div class="repeater">
11    <p>リピーター</p>
12    <p>200</p>
13  </div>
14</div>

CSS
1.three_indicators {
2  display: flex;
3}
4
5.three_indicators > div {
6  flex-grow: 1;
7  border: solid 1px gray;
8  padding: 10px;
9  margin: 5px;
10  text-align: center;
11}
12