【HTML/CSS】このデザインの実装方法がわかりません【画像あり】

上図のようなデザインを実装しようと試みています。
rowの中でボタン＆テキストをcol-autoに、画像をcolに入れることでボタンと画像を横並びにしたいのですが、下図のようにボタンが画像の上に来てしまいます。

そのため、ボタンを押すと下図のような動きになります。

【実現したいこと】
①ボタンと画像を同じ行に置く
②ボタンをクリックしテキストを表示すると、テキストが表示された領域分画像が縮小される

最終的には画像の右にもボタンを置き、画像をサンドイッチするような形にしたいです。

よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>Title</title>
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <link rel="stylesheet" href="css/bootstrap.css">
10    <link rel="stylesheet" href="css/style.css">
11
12    <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
13    <script type="text/javascript" src="js/bootstrap.js"></script>
14</head>
15
16<body>
17    <div class="container-fluid" style="height: auto;">
18        <div class="row">
19            <!-- テキスト（左） -->
20            <div class="col-auto">
21                <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#target01">click
22                    me</button>
23                <div id="target01" class="collapse">
24                    <div class="panel panel-default">
25                        <div class="panel-body">
26                            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
27                        </div>
28                    </div>
29                </div>
30            </div>
31            <!-- 画像 -->
32            <div class="col">
33                <img src="img/img.png" alt="" class="img-responsive center-block">
34            </div>
35        </div>
36        <!-- フッター -->
37        <div class="row">
38            <footer class="footer">
39                <div class="container">
40                    <p class="text-muted">フッター</p>
41                </div>
42            </footer>
43        </div>
44    </div>
45</body>
46
47</html>
48

CSS
1html {
2    position: relative;
3    min-height: 100%;
4}
5
6body {
7    margin-bottom: 60px;
8}
9
10.footer {
11    position: absolute;
12    bottom: 0;
13    width: 100%;
14    height: 60px;
15    background-color: #f5f5f5;
16}
17
18.panel {
19    margin-top: 0px;
20}
21
22/* テキスト */
23
24#target01 {
25    width: 300px;
26    max-height: 300px;
27    overflow: scroll;
28}
29
30/* 画像 */
31
32img {
33    padding: 15px;
34}
35
36@media (min-width: 1201px) {
37    img {
38        width: 80%;
39    }
40}
41
42@media (max-width: 1200px) {
43    img {
44        width: 100%;
45        padding: 0px;
46    }
47}

miyabi_pudding

2020/06/24 06:05

最低限CSSは必要ですが、CSSも記載お願いします。また、ボタンクリック時の変化の処理はJavaScriptを使っているなら、そのソースコードも記載したほうがいいかと。

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

回答1件

ベストアンサー

現在の状態は左に隠しているテキスト部分が画像を押しのけているのではなく、Bootstrapのグリッドシステムでcol-lg-3を利用して3列分の幅を確保されている状態です。
これはテキスト部分とは関係ない話なので、テキスト部分の表示有無に関わらず幅が確保されてしまっています。

col-autoを利用して幅を要素に合わせて変わるようにしれやれば、テキスト部分の表示を行ったときに幅が変わるようになります。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8">
6    <title>Title</title>
7    <meta http-equiv="X-UA-Compatible" content="IE=edge">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <link rel="stylesheet" href="css/style.css">
10
11    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
12    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
13    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
14
15</head>
16
17<body>
18    <div class="container-fluid" style="height: auto;">
19        <div class="row">
20            <!-- テキスト（左） -->
21            <div class="col-auto">
22                <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#target01">click
23                    me</button>
24                <div id="target01" class="collapse" style="width:300px;">
25                    <div class="panel panel-default">
26                        <div class="panel-body">
27                            テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
28                        </div>
29                    </div>
30                </div>
31            </div>
32            <!-- 画像 -->
33            <div class="col">
34                <img src="img/img.png" alt="" class="img-responsive center-block">
35            </div>
36        </div>
37        <!-- フッター -->
38        <div class="row">
39            <footer class="footer">
40                <div class="container">
41                    <p class="text-muted">フッター</p>
42                </div>
43            </footer>
44        </div>
45    </div>
46</body>
47
48</html>