ここから本文です

HTML CSSについてわからないことがあります。

アバター

ID非公開さん

2019/5/2222:24:11

HTML CSSについてわからないことがあります。

画像4つあるとします。(色オレンジ)

画像のように上の画像の幅と下の3つの幅を合わせるにはどうしたら良いでしょうか?
下の3つの画像のを変えなければならないのでしょうか?

補足めちゃめちゃ初心者です!!

text-align-last,HTML CSS,img src,space-between,style&gt,justify-content,オレンジ

閲覧数:
25
回答数:
1
お礼:
50枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

ois********さん

2019/5/2222:55:13

パッと見で思いつく方法は2つ。



【 方法1 】ふつうに両端揃え


画像 <img> は、
テキストと同じようにインライン(テキスト行内)に配置されるから、
ふつうに記述すると横に並び、
親要素の横幅からはみ出したら次の行に改行される。
これをそのまま利用するだけ。

1つ目の画像を width:100% にして、
それ以外の画像を width:30% にすれば、
1つ目の画像の後で1度改行されて、
2行目に3つの画像が並ぶ。

あとは「text-align:justify」で「均等割り付け」にするだけ。
ただし、
一般的なブラウザでは、
「text-align-last:justify」にしないと、
さいごの行が均等割り付けにならない。
さらに IE の場合は、
「text-align」と「text-align-last」の両方を「justify」にしないと
均等割り付けにならない。
というわけで、
「text-align-last:justify」と「text-align:justify」を指定する。

────────────────
<div id="imgbox">
<img src="~" alt="画像1">
<img src="~" alt="画像2">
<img src="~" alt="画像3">
<img src="~" alt="画像4">
</div>

<style>
#imgbox {
width: 600px;
margin: auto;
text-align: justify;
text-align-last: justify;
}
#imgbox > img { width: 30%; }
#imgbox > img:first-child { width: 100%; margin-bottom: 20px }
</style>
────────────────



【 方法2 】フレックスで space-between


フレックスレイアウト「display:flex」で、
コンテンツの揃え位置を「justify-content:space-between」にすると、
フレックスアイテムは両端にそろって配置される。
それを利用する。

────────────────
<div id="imgbox">
<img src="~" alt="画像1">
<img src="~" alt="画像2">
<img src="~" alt="画像3">
<img src="~" alt="画像4">
</div>

<style>
#imgbox {
width: 600px;
margin: auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
#imgbox > img { width: 30%; }
#imgbox > img:first-child { width: 100%; margin-bottom: 20px }
</style>
────────────────

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる