Q&A
前回回答していますが
なぜflexはダメなのか補足してください
初心者ですが、宜しくお願いします。
現在、
HTML
<div class="A"> <p><img src="～.png" width="80" height="100" alt=""/></p> <p class="B">～～です。</p> </div> <div class="A"> <p><img src="～.png" width="80" height="100" alt=""/></p> <p class="B">～～～です。</p> </div>
CSS
div.A p { display: table-cell ; vertical-align: middle ; margin: 0 ; }
として、
【画像】【文章】
【画像】【文章】
と表示させています。
（width：480（スマホレベル）からはこのままでいいのですが、）
これを min-width：481px でfloatして、
【画像】【文章】【画像】【文章】
と表示させたいと思っています。
CSSは、
@media screen and (min-width:481px)
で指定であっていますでしょうか。
また、その分をもう一度書くのでしょうか。
試しに、先述のCSSの後に
@media screen and (min-width:481px) { div.A p { display: table-cell; vertical-align: middle; margin: 0; float: left; width: 50%; } }
を入れてみたところ、全く上手く行きませんでした。
正しいやり方と、cleafixの書き方を教えて下さい。
.clearfix::after { content: "" ; display: block ; clear: both ; }
をCSSに追記して、反映させるのかと思っていますが、
やり方がいまいちわかっていません。
申し訳ありません。
昨日上手く行かなかったので、
別の方法を模索しました。
上手く行かなかった内容としては、
スマホからみると、
【文字】【文字】
と表示され、理想の、
【画像】【文字】
【画像】【文字】
にならなかったためです。
理解不足が故だと思います。
クラス名のサンプルに「**」的なものをつかうのはやめてください
動かないときの切り分けができなくなります
申し訳ありません。
修正致しました。
<style>
@media screen and (min-width: 481px) {
.hoge{display:flex;}
}
</style>
<div class="A">
<p><img src="～.png" width="80" height="100" alt=""/></p>
<p class="B">～～です。</p>
<p><img src="～.png" width="80" height="100" alt=""/></p>
<p class="B">～～～です。</p>
</div>
で失敗しています。
質問文のコードはコードブロックで囲んでください。
やり方が分かっていませんでした。申し訳ありません。
おっしゃっていることはこれであっていますでしょうか。
コーディング関連のスキルでは、上手く行かない時に、どういう風に上手く行かないのかをきちんと判断することが重要になります。
例えば今回の場合、上手く行かないと一言でいっても
1. floatだけが効かない
2. メディアクエリの中に入れたスタイルが全て効かない
3. floatによって何かしらの影響は出ているけど、想定した形にならない
など、いろんな「上手く行かない」があるので、
そこをきちんと考えて、質問文にもきちんと書くようにすると、解決率がアップしますよ！
ありがとうございます。
@media screen and (min-width:481px) {
のCSSを書き込むと、
そもそも画像と文字が横並びにならず、
【画像】
【文字】
【画像】
【文字】
な上、その次の<h3>が上に上がってきてしまいます。
float: left; が問題なようで、それを書き込むと上記のようなレイアウトになってしまいます。
yuuki_carolさん
> おっしゃっていることはこれであっていますでしょうか。
⇒合っています。
次回からは、
``` html
<div>test</div>
```
のようにコードブロックの横に示したい言語名を記載してください。
コードが色付けされ見やすくなり、より一層回答が付きやすくなります。
回答2件
0
ベストアンサー
flexを使った場合のコード例です。
css
1div.A { 2 display: flex; 3 align-items: center; 4} 5 6div.A p { 7 margin: 0 ; 8} 9 10@media screen and (min-width:481px) { 11 div.A { 12 display: inline-flex; 13 width: 48%; 14 } 15}
flexは親要素に設定すると子要素が横並びになります。
また、inline-flex にすると親要素自体も横並びになります。
投稿2020/02/26 04:43
編集2020/02/26 05:51
総合スコア34075
携帯で、
【画像】【文章】【画像】【文章】
と表示されました。
画像が表示されない状態から解消されました。
しかし、
【画像】【文章】
【画像】【文章】
と表示したいので、もう少し回答を待ちたいと思います。
ありがとうございました。
動作確認用サンプルのリンクを回答に追加しましたので、確認してみてください。
スマホ(スクリーンサイズ481px未満)で、
【画像】【文章】
【画像】【文章】
と表示されるはずです。
まさしく、やりたいことがこれでした。
先程は、ミスが有ったのかもしれません。
もう一度やってみます。
出来ました！！！！！
先程は、こちらにミスが有ったようで、申し訳ありませんでした。
動作確認用サンプルまで作成して頂き、本当に助かりました。
別件なのですが、
今回は、【481以上からの閲覧時に横並び】
にしましたが、
【480以下からの閲覧時に横並びを解除】
というやり方も出来るのでしょうか。
<td><table>~~</td></table>
<td><table>~~</td></table>
というのを、横並びに表示するように書き込んであるとして、
480以下からの閲覧時、横並びに【しない】という設定が出来ますか。
また、可能であれば、再度質問を立てても構わないでしょうか。
子要素の横並びを解除して縦並びということですか。
display: flex; を display: block; に変更すれば縦並びになります。
レイアウトをtableでするというのはいまとなっては古い手法です。
0
きちんと問題を切り分けていただいて、ありがとうございます。
今回の問題は「3. floatによって何かしらの影響は出ているけど、想定した形にならない」ということですね。
メディアクエリの問題であれば
「2. メディアクエリの中に入れたスタイルが全て効かない」
のパターンになりますので、メディアクエリの書き方には問題ありません。
質問者様が最終的にどういう形に仕上げたいのか、まだ想像しきれていないので、
ひとまずこうしたいのかな？というコードを提案してみます。
（意図した結果になっているかわからないので、解説は省略します。）
css
1div.A p { 2 display: table-cell ; 3 vertical-align: middle ; 4 margin: 0 ; 5} 6 7@media screen and (min-width:481px) { 8 div.A p { 9 display: table-cell; 10 vertical-align: middle; 11 margin: 0; 12 float: left; 13 } 14 div.A{ 15 clear: both; 16 } 17} 18
投稿2020/02/26 05:24
編集2020/02/26 05:25総合スコア975
ちなみに今回のようなことをしたいのであれば、自分もflex-boxの使用をおすすめします。
（「flex-boxでできるならfloatが理解できなくてもOK」と思ってはいないので、回答している次第です。）
すいません、ミスが有ったので、編集させて頂きました。。
コピーして使用させて頂きました。
携帯からは未確認ですが、
PCから、
【画像】【文章】
【画像】【文章】
になっています。
あなたの回答
tips
プレビュー
