レスポンシブなレイアウトについてアドバイスお願いいたします。（floatの使い方について）

解決したいこと
下記画像の横並びのレイアウトをスマホ・タブレット対応時（width: 1080px以下）に、右端の要素以外を左寄せ縦並べに調整したいです。

理想のスマホ・タブレットレイアウト

問題点
現在、スマホ・タブレット時に、右端以外の要素に[float: left;]、右端要素に[float: right;]を設定し
理想のレイアウトを実現しようとしたのですが、floatの仕組みを理解できていないせいか右端要素が親要素の底辺に張り付いてしまっています。

現在のスマホ・タブレットレイアウト

現在のコード

HTML
1<div class="modal js_modal">
2  <div class="modal_bg js_modal_close"></div>
3    <div class="modal_wrap">
4      <!-- モーダルの要素記入 -->
5      <p class="modal_title">挿入したい住所の選択ボタンを押してください。</p>
6      <div class="modal_content">
7        <div class="receiver_info_list">
8          <div class="receiver_info_title_box">
9            <div class="col01 receiver_info_title pcItem">受取人名</div>
10            <div class="col02 receiver_info_title pcItem">電話番号</div>
11            <div class="col03 receiver_info_title pcItem">郵便番号</div>
12            <div class="col04 receiver_info_title pcItem">都道府県</div>
13            <div class="col05 receiver_info_title pcItem">それ以降の住所</div>
14            <div class="col06 receiver_info_title">全<span class="registerd_info_count">2</span>件</div>
15          </div>
16          <div class="receiver_info_detail_box">
17            <div class="col01 receiver_info_detail">鈴木一郎</div>
18            <div class="col02 receiver_info_detail">080-111-1222</div>
19            <div class="col03 receiver_info_detail">111-0111</div>
20            <div class="col04 receiver_info_detail">東京都</div>
21            <div class="col05 receiver_info_detail">世田谷区砧1-1-1 宮迫マンション101</div>
22            <div class="col06 receiver_info_detail"><button>選択</button></div>
23            <div class="cb spItem"></div>
24          </div>
25          <div class="receiver_info_detail_box">
26            <div class="col01 receiver_info_detail">鈴木一郎</div>
27            <div class="col02 receiver_info_detail">080-111-1222</div>
28            <div class="col03 receiver_info_detail">111-0111</div>
29            <div class="col04 receiver_info_detail">東京都</div>
30            <div class="col05 receiver_info_detail">世田谷区砧1-1-1 宮迫マンション101</div>
31            <div class="col06 receiver_info_detail"><button>選択</button></div>
32            <div class="cb spItem"></div>
33          </div>
34        </div>
35      </div>
36    </div>
37  </div>

CSS
1.modal{
2  display: none;
3  height: 100vh;
4  position: fixed;
5  top: 0;
6  width: 100%;
7}
8.modal_bg{
9  background: rgba(0,0,0,0.8);
10  height: 100vh;
11  position: absolute;
12  width: 100%;
13}
14.modal_wrap{
15  left: 50%;
16  padding: 40px;
17  position: absolute;
18  top: 50%;
19  transform: translate(-50%,-50%);
20  width: 80%;
21}
22.modal_title {
23  text-align: center;
24  color: #fff;
25}
26.modal_content {
27  background: #fff;
28  width: 100%;
29  margin-top: 30px;
30  padding: 50px;
31}
32.receiver_info_list {
33  width: 100%;
34}
35.receiver_info_title_box,
36.receiver_info_detail_box {
37  width: 100%;
38  display: flex;
39}
40.receiver_info_title_box {
41  border-bottom: 1px solid #B2B2B2;
42}
43.receiver_info_detail_box {
44  border-bottom: 1px solid #EBEBEB;
45}
46.receiver_info_list .col01 {
47  width: 15%;
48  padding-left: 15px;
49}
50.receiver_info_list .col02 {
51  width: 20%; 
52}
53.receiver_info_list .col03 {
54  width: 15%; 
55}
56.receiver_info_list .col04 {
57  width: 10%;
58}
59.receiver_info_list .col05 {
60  width: 40%;
61}
62.receiver_info_list .col06 {
63  width: 10%;
64  padding-right: 15px;
65}
66.receiver_info_title_box .receiver_info_title {
67  text-align: left;
68  height: 30px;
69  line-height: 30px;
70}
71.receiver_info_title_box .receiver_info_title.col06 {
72  text-align: right;
73}
74.receiver_info_detail_box .receiver_info_detail {
75  text-align: left;
76  height: 50px;
77  line-height: 50px;
78}
79.receiver_info_detail_box .receiver_info_detail.col06 {
80  text-align: right;
81}
82.receiver_info_detail button {
83  width: 100%;
84  height: 30px;
85  line-height: 25px;
86  background-color: #000;
87  color: #fff;
88  border-radius: 20px;
89  cursor: pointer;
90}
91
92@media screen and (max-width: 1080px) {
93  .modal_wrap {
94    width: 95%;
95  }
96  .modal_content {
97    padding: 20px;
98  }
99  .receiver_info_title_box,
100  .receiver_info_detail_box {
101    width: 100%;
102    display: block;
103  }
104  .receiver_info_title_box {
105    border-bottom: 1px solid #B2B2B2;
106  }
107  .receiver_info_detail_box {
108    border-bottom: 1px solid #EBEBEB;
109  }
110  .receiver_info_list .col01 {
111    width: 70%;
112    padding-left: 0;
113  }
114  .receiver_info_list .col02 {
115    width: 70%;
116  }
117  .receiver_info_list .col03 {
118    width: 70%;
119  }
120  .receiver_info_list .col04 {
121    width: 70%;
122  }
123  .receiver_info_list .col05 {
124    width: 70%;
125  }
126  .receiver_info_list .col06 {
127    width: 30%;
128    padding-right: 0;
129  }
130  .receiver_info_title_box .receiver_info_title.col06 {
131    width: 100%;
132  }
133  .receiver_info_detail_box {
134    margin-top: 15px;
135  }
136  .receiver_info_detail_box .receiver_info_detail {
137    text-align: left;
138    float: left;
139    height: 30px;
140    line-height: 25px;
141  }
142  .receiver_info_detail_box .receiver_info_detail.col06 {
143    text-align: right;
144    float: right;
145  }
146  .receiver_info_detail button {
147    width: 100%;
148    height: 30px;
149    line-height: 25px;
150    background-color: #000;
151    color: #fff;
152    border-radius: 20px;
153    cursor: pointer;
154  }
155}

解決策についてアドバイスをいただけると幸いです。

また、本来はあまりfloatを使いたくなかったので、理想のレイアウトをfloat以外で実現できる方法があれば
ご教示いただけると大変助かります。

よろしくお願いいたします。

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

回答1件

その構成なら .receiver_info_detail_boxにposition: relative;を付けて.receiver_info_detailにposition: absolute;を付けて処理するのが簡単だとは思います。

CSS
1.receiver_info_detail_box {
2  position: relative;
3}
4.receiver_info_detail {
5  position: absolute;
6  right: 0;
7  top: 0;
8}

投稿2019/10/25 11:33

kei344

総合スコア69596

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

レスポンシブなレイアウトについてアドバイスお願いいたします。（floatの使い方について）

関連した質問