Q&A
おかげで解決できました。
ありがとうございます。
配置の方法を教えてください。
アイコンの画像と、テキストを並べます。
左にテキスト、右にアイコンを横一列にならべ、さらに画面の右端から10px離したところに設置したいです。
やり方としてfloatくらいしか知らないのですが、画像と文字にそれぞれfloatで左右に指定した上で全体にfloat指定したのですが、うまくいかないです。
右の余白に隙間がないとダメなのかなと思い、marginを書きましたがそれもダメでした。
どうかお願いします
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<title>サンプル</title> 6<link rel="stylesheet" href="sample.css"> 7</head> 8<body> 9 10 <div class="link"> 11 <p class="share">Share</p> 12 <p><img src="gazou.png" class="images"></p> 13 </div> 14 15</body> 16</html>
css
1.link { 2 float: right; 3 margin-right: 200px; 4} 5.share { 6 float: left; 7} 8 9.images { 10 float: right; 11}
回答2件
0
Flexboxを使った場合のコード例
css
1.link { 2 margin-right: 10px; 3 display: flex; 4 justify-content: flex-end; /*右寄せ*/ 5 align-items: center; /*垂直位置 中央*/ 6}
HTMLは変更する必要はないです。
投稿2019/12/15 16:51
編集2019/12/15 16:52
総合スコア34073
0
ベストアンサー
HTML
1 <div class="link"> 2 <p><img src="gazou.png" class="images"></p> 3 <p class="share">Share</p> 4 </div>
CSS
1.link { 2 margin-right: 10px; 3 text-align: right; 4} 5.images { 6 float: right; 7} 8 9.share { 10} 11
画像とテキストの順番を入れ替えた上で、画像のCSSだけにfloat: right;をつけてあげます。
floatはfloatをつけた要素の後ろに続く要素を横並びにするものなので起点となる要素一つに付ければ大丈夫です。
投稿2019/12/15 14:54
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。