マジレス希望

CSSが分からず困っています

締切済

質問者：sp_murakami
質問日時：2021/09/06 17:34
回答数：4件

画像AとBを横に2枚並べています。その下に同じく、CとDを横に2枚並べています。しかし、DIVで囲んでいるABの画像と同じくDIVで囲んでいるCDの画像の間に謎のスペースが出来ています。
下記のようなものをコピーして利用しているのですが、何が誤っているのか分かりません。コピペしか出来ない初心者ですが、ご教授お願いします

<style>.myrow{display:-webkit-flex;display:flex;}
.mycol-1{flex:1;}
.mycol-2{flex:2;}
.mycol-3{flex:3;}
.mycol-4{flex:4;}
.mycol-5{flex:5;}
.mycol-6{flex:6;}
@media screen and (max-width:700px){
.myrow{-webkit-flex-direction:column;flex-direction:column;}
}
</style>
<div class="myrow">
<div class="col-1" style="margin: 1em;">
Aの画像
</div>
<div class="col-1" style="margin: 1em;">
Bの画像
</div>
</div>
<div class="myrow">
<div class="col-1" style="margin: 1em;">
Cの画像
</div>
<div class="col-1" style="margin: 1em;">
Dの画像
</div>
</div>

残念ながら横に４つ並んで解決しませんでした。

No.1の回答に寄せられた補足コメントです。補足日時：2021/09/06 17:51
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

最新から表示
回答順に表示

No.4

回答者： gura_
回答日時：2021/09/06 20:34

sp_murakami さん

････間に謎のスペースが出来ています。･････････

色々ありますが、取り敢えず、例えば、↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" >
<style>
.myrow{display:-webkit-flex;display:flex;}
.mycol-1{flex:1;}
.mycol-2{flex:2;}
.mycol-3{flex:3;}
.mycol-4{flex:4;}
.mycol-5{flex:5;}
.mycol-6{flex:6;}
img{ height:100%; } /* 追加 */
@media screen and (max-width:700px){
.myrow{-webkit-flex-direction:column;flex-direction:column;}
}
</style>
</head>
<body>
<div class="myrow">
<div class="col-1" style="margin: 0em;">
<img src="Aの画像" >
</div>
<div class="col-1" style="margin: 0em;">
<img src="Bの画像" >
</div>
</div>
<div class="myrow">
<div class="col-1" style="margin: 0em;">
<img src="Cの画像" >
</div>
<div class="col-1" style="margin: 0em;">
<img src="Dの画像" >
</div>
</div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

遅くなりましたがありがとうございます

通報する

お礼日時：2021/09/25 12:42

参考程度に

No.3

回答者： fujillin
回答日時：2021/09/06 18:17

こんばんは

＞DIVで囲んでいるABの画像と同じくDIVで囲んでいる
＞CDの画像の間に謎のスペースが出来ています。
div要素にmagin:1em;を指定してあるのが、スペースの一番の原因では？
それではないということでしょうか？
その場合は、ソースの改行がスペース1個分とみなされるのでその影響かと。

なさりたいことがイマイチわかりませんけれど、ひとまず、styleに、
div { margin:0 !important; }
img {display:block;}
を追記したら改善されませんか？
改善したなら、きちんと修正してみてください。
（ご質問文には明示されていませんけれど、画像はimgタグで表示しているものと仮定しています）

なお、ご質問とは関係ありませんけれど、display:flexはほとんどのブラウザでOKなので、ベンダープレフィックスはもう不要かと。
https://caniuse.com/flexbox