Q&A
col-6 のパディングはどう扱う予定ですか？
実現したいこと
- 片側だけはみ出させた子要素の幅を画面端から中央ぴったりの幅にしたい
前提・発生している問題
CSSはBootstrap5.3.0を利用してコンテンツ幅などを管理しています。
div.rowの中のdivを左右に横並びにして、片側だけをはみ出させてそこに画像を配置しようとしているのですが、はみ出させたdivの幅が画面外へ突き抜けていってしまいます。
下の画像でいうと、
- bodyの幅が1536px
- .container／.rowの幅が1320px
- .col-6の幅が660px
- .hamidashiの幅が1086px
になっています。
想定以上に画像が大きくなってしまうので、これを左は画面端からにしたいのです。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> 8<style> 9 .col-6 { 10 height: 300px; 11 } 12 .hamidashi { 13 margin-left:calc(50% - 50vw); 14 background:#ddd; 15 } 16 .img img{ 17 width: 100%; 18 height: 300px; 19 object-fit:cover; 20 } 21</style> 22</head> 23<body> 24 <div class="container"> 25 <div class="row"> 26 <div class="col-6" style="background:#ccc;">aaaaa</div> 27 <div class="col-6" style="background:#eee;">bbbb</div> 28 <div class="col-6" style="background:#bbb;"> 29 <div class="hamidashi"> 30 <div class="img"><img src="dummy_01.jpg" alt="" width="668" height="500"></div> 31 </div> 32 </div> 33 <div class="col-6" style="background:#aaa;">ddd</div> 34 </div> 35 </div> 36</body>
試したこと
width: 100vwを入れてみたりしましたがよりでかくなりました
補足情報（FW/ツールのバージョンなど）
確認環境：Chrome
Bootstrap5.3.0
右側につくpaddingについてはそのままにしておきたいです。
左側は画像がぴったりくっついていてほしいので、0にします。
であれば、hatena19 さんのご回答でいいかと思います。
回答1件
0
ベストアンサー
ご希望のことは、
.hamidashi要素の親要素の幅(100%)から画面幅の半分を引いた分だけはみ出させたいということなので、
css
1 .hamidashi { 2 margin-left:calc(100% - 50vw); 3 background:#ddd; 4 }
厳密にはcol-6のpadding-right分(12px)はみ出しますのでその分を足しておく必要があります。
投稿2024/03/19 02:55
編集2024/03/19 03:07
総合スコア33740
回答ありがとうございます。
これはもうやっていて、はみ出した部分のボックスが横に伸びすぎることに困っています。
はみ出した部分のボックスとは具体的にどの部分ですか。
また、そのためにどのように困ってますか。
検討材料してと作成したサンプルをおいておきます。
下記でどの部分が想定とことなりますか。
https://codepen.io/hatena19/pen/xxegrgX
> onxit さん
> これはもうやっていて
onxit さんのコードは
margin-left:calc(50% - 50vw);
hatena19 さんのコードは
margin-left:calc(100% - 50vw);
ですが、変更を見落とされてませんか？
大変失礼しました。回答いただいた内容で解決いたしました。
ご指摘ありがとうございます。
あなたの回答
tips
プレビュー
