divが重なってしまい、それに合わせて背景画像も重なり合ってしまっています。
●bootstrap(ver.4)を使用し、backgruound-image*3枚を横並びにしています。
●右のdivが左のdivに重なっている状況です。
●marginでdivどうしを離そうとしても出来ませんでした。
bootstrapを使用している場合は、marginで動かすことは不可能なのでしょうか?
背景画像の重なりを解消したいです。よろしくお願いいたします。????
HTML
1 2<div class="ppp"> 3 <h3>ホスティングの詳細はこちら</h3> 4 <div class="container"> 5 <div class="row"> 6 7 <div class="col-12 col-lg-4"> 8 <a href="#"> 9 <div class="set"> 10 11 <h5>初期設定</h5> 12 <p>ホスティング入門ガイド</p> 13 </div> 14 </a> 15 </div> 16 17 <div class="col-12 col-lg-4"> 18 <a href="#"> 19 <div class="safe"> 20 <h5>安全</h5> 21 <p>ホストを守るAirbnbの仕組み</p> 22 </div> 23 </a> 24 </div> 25 26 <div class="col-12 col-lg-4"> 27 <a href="#"> 28 <div class="money"> 29 <h5>マネープラン</h5> 30 <p>Airbnbで収益を得るには</p> 31 </div> 32 </a> 33 </div> 34 35 </div> 36 </div> 37</div>
CSS
1.ppp { 2 width: 1080px; 3 height: 370px; 4 margin: 0 auto; 5 } 6 .ppp h3 { 7 font-weight: bold; 8 margin-top: 110px; 9 margin-left: 20px; 10 } 11 12 .ppp h5 { 13 font-weight: bold; 14 font-size: 16px; 15 } 16 .ppp p { 17 font-size: 14px; 18 } 19 20 .ppp a { 21 color: black; 22 } 23 .ppp a:hover { 24 color: black; 25 } 26 27 a:hover { 28 text-decoration: none; 29 } 30 .set{ 31 height: 269px; 32 width: 400px; 33 align-items: center; 34 text-align: center; 35 padding-top: 10px; 36 background-image: url("../entrance.jpg"); 37 background-size: cover; 38 background-repeat: no-repeat; 39 text-decoration: none; 40 } 41 42 .safe{ 43 height: 269px; 44 width: 400px; 45 align-items: center; 46 text-align: center; 47 padding-top: 10px; 48 background-image: url("../family.jpg"); 49 background-size: cover; 50 background-repeat: no-repeat; 51 } 52 53 .money{ 54 height: 269px; 55 width: 400px; 56 align-items: center; 57 text-align: center; 58 padding-top: 10px; 59 background-image: url("../yellow.jpg"); 60 background-size: cover; 61 background-repeat: no-repeat; 62 }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/12 10:22
2020/02/12 10:33