CSSを用いた画像配置について

問題点

Djangoを使用し、ホームページの作成を行っています。
画像配置を右側にしたいのですが、うまくいきません。
ご教授の方をお願いいたします。

試したこと

画像配置方法としてfloat leftを使用しました。以下のサイトを参考にCSSを記述したのですが、画像の移動が行われませんでした。

https://www.tagindex.com/stylesheet/img/float.html

html
1 <form method="post" enctype="multipart/form-data">
2{% extends "./_base.html" %}
3{% load static %}
4{% block content %}
5    {% load crispy_forms_tags %}
6    <div class="container-fluid bg-secondary text-white">
7      <div class ="bg-secondary text-white">  <!-- 画面上部色設定 -->
8        <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
9            <div class="modal-dialog" role="document">
10                <div class="modal-content">
11                    <div class="modal-header">
12                        <h5 class="modal-title">検索条件</h5>
13                        <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
14                            <span aria-hidden="true">&times;</span>
15                        </button>
16                    </div>
17                    <form id="filter" method="get">
18                        <div class="modal-body">
19                            {{ filter.form|crispy }}
20                        </div>
21                    </form>
22                    <div class="modal-footer">
23                        <a class="btn btn-outline-dark" data-dismiss="modal">戻る</a>
24                        <button type="submit" class="btn btn-dark" form="filter">検索</button>
25                    </div>
26                </div>
27            </div>
28        </div>
29
30         <!-- 新規、検索ボタン設定 -->
31
32        <div class="row">
33            <div class="col-12">
34                <a class="btn btn-secondary filtered" style="visibility:hidden" href="/?page=1">検索を解除</a>
35                <div class="float-right mt-1">
36                    <a class="btn btn-dark" href="{% url 'create' %}">新規</a>
37                    <a class="btn btn-dark" data-toggle="modal" data-target="#myModal" href="#">検索</a>
38                </div>
39            </div>
40        </div>
41
42        <!-- ページ番号ボタン設定 -->
43
44        <div class="row mt-3">
45            <div class="col-10 mx-auto">
46                {% include "./_pagination.html" %}
47            </div>
48        </div>
49    </div>
50
51   
52    <html>
53      <head>
54        <link rel="stylesheet" type="text/css" href= "{% static 'app.css' %}"> 
55      </head>
56      <body>
57          <div class="container-fluid">
58           <div class="col-12 p-3 mb-12">
59                <ul class="list-group">
60                  {% if item_list %}
61                    {% for item in item_list %}
62                        <li class="list-group-item bg-light text-dark">　<!-- サイト表示一覧 背景色変更設定 -->
63                            {# item_detail_contents.html を参考に必要な項目を追加してください #}
64
65                            <div class="row">
66                                <div class="col-2 offset-2">
67                                    <p>1_ラーメン店</p>
68                                </div>
69                                <div class="col-4 offset-2">
70                                    <p>{{ item.name | default_if_none:"未入力" }}</p>
71                                </div>
72                            </div>
73                            
74                            <div class="row">
75                               <div class="col-2 offset-2">
76                                    <p>2_メニュー名称</p>
77                               </div>
78                               <div class="col-4 offset-2">
79                                    <p>{{ item.name1 | default_if_none:"未入力" }}</p>
80                               </div>
81                            </div>
82                            
83                            <div class="row">
84                                <div class="col-2 offset-2">
85                                    <p>3_都道府県</p>
86                                </div>
87                                <div class="col-4 offset-2">
88                                    <p>{{ item.name2 | default_if_none:"未入力" }}</p>
89                                </div>
90                            </div>
91                                    
92                            <div class="row">
93                                <div class="col-2 offset-2">
94                                    <p>4_市区町村</p>
95                                </div>
96                                <div class="col-4 offset-2">
97                                    <p>{{ item.name3 | default_if_none:"未入力" }}</p>
98                                </div>
99                            </div>
100                            
101                            <div class="row">
102                                <div class="col-2 offset-2">
103                                    <p>5_スープ味</p>
104                                </div>
105                                <div class="col-4 offset-2">
106                                    <p>{{ item.get_sample_1_display | default_if_none:"未入力" }}</p>
107                                </div>
108                            </div>
109                            
110                             <div class="row">
111                                <div class="col-2 offset-2">
112                                    <p>6_満足度評価</p>
113                                </div>
114                                <div class="col-4 offset-2">
115                                    <p>{{ item.sample_satisfaction | default_if_none:"未入力" }}</p>
116                                </div>
117                            </div>
118                            
119                            <div class="row">
120                                <div class="col-2 offset-2">
121                                    <p>7_来店日時</p>
122                                </div>
123                                <div class="col-4 offset-2">
124                                    <p>{{ item.date | default_if_none:"未入力" }}</p>
125                                </div>
126                            </div>
127
128                            
129                            <div class="col-12 clearfix">
130                                 {% if item.image %}
131                                 <p><img src ='{{item.image.url}}'class = "img-fluid" width=200 top=400></p>
132                                 {% endif %}  
133                            </div>
134                           
135
136                           <div class="row">
137                            <div class="col-12">
138                                <div class="float-right">
139                                    <a class="btn btn-dark " href="{% url 'detail' item.pk %}">詳細</a>
140                                    <a class="btn btn-dark " href="{% url 'update' item.pk %}">編集</a>
141                                    <a class="btn btn-dark " href="{% url 'delete' item.pk %}">削除</a>
142                                </div>
143                            </div>
144                        </div>                           
145                       </li>
146                    {% endfor %}
147                  {% else %}      
148                       <li class="list-group-item">
149                            <p>対象のデータがありません</p>
150                       </li>
151                  {% endif %}
152                </ul>
153            </div>
154        </div>
155     </body>
156    </html>
157    
158
159     <div class ="bg-secondary text-white">
160        <div class="row mt-3">
161            <div class="col-10 mx-auto">
162                {% include "./_pagination.html" %}
163            </div>
164        </div>
165     </div>
166      
167    </div>
168</div>
169{% endblock %}
170</form>
171

CSS
1img.img-fluid { float: right; }
2

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

回答1件

ベストアンサー

こんにちは。

ひとまず、Bootstrap でフロートを使ったレイアウトをするのは、非常に相性が悪いのでやり方を変えた方が無難だろうと思います。
Bootstrap で画像を右に配置したい場合は、Bootstrap のグリッドシステムを素直に使うのが無難です。たとえば：

html
1<p class="col-8">テキスト</p>
2<img class="col-4" src="..." alt="...">

投稿2021/04/21 01:34

編集2021/04/23 01:12

Lhankor_Mhy

総合スコア36896

fdd

2021/04/22 17:15

ご回答ありがとうございます。 bootstrapのグリットを見直してみたのですが、divタグを一つ表示内容ごとに区切っているため、7つの表示内容の右側に画像を回り込ませる方法が分かりません。全体(表示内容、表示画像)をdivタグで括るため<div class="row">を<li class="list-group-item bg-light text-dark">の下に追加してみましたが、フォーマットが崩れてしまいます。

Lhankor_Mhy

2021/04/23 01:11

> <div class="row">を<li class="list-group-item bg-light text-dark">の下に追加当方で試してみたところ、特に崩れていないように見えました。 ↓サンプルです。 https://jsfiddle.net/Lhankor_Mhy/xyjnsLrt/

fdd

2021/04/23 15:03

解決できました。ご教授ありがとうございます。原因はテキスト文と画像をdivで区切れておらず、一括りで表示させていました。

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