jinchangz回答ポイント 100pt

HTML+CSSの要素の配置についての質問です。

親要素の中に子要素が２つある要素があるとします。
<div>
<span class='koyouso'>子要素</span>　//文字列が入る。折り返しなどもする。
<span class='gazou'>画像</span> //画像のサイズは固定です。(24px*24px)
</div>

子要素と画像を２つ横に並べるために子要素１に
.koyouso{
float:left;
width:95%;
display:inline;
}
を定義し、画像のスタイルに
.gazou {
background:url('../img/img.png') no-repeat scroll center;
float:right;
width:24px;
height:24px;
display:inline;
}
を指定すると画像が回り込み目的は達成できてるのですが
Twitter Bootstrap を元にサイトを構築していて横幅が可変長のためスマートフォンだと回り込まなくなってしまいます。
（子要素の横幅を90%にすればスマホでも回り込むのですが今度はPCだと不自然に空白が出来てしまう。）

できれば右に回り込む画像の横幅を24pxの固定にし、左の子要素は可変長を維持するようなスタイルを定義したいのですが
可能でしょうか？
詳しい方お助けください。

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

ベストアンサー

a-kuma32013/04/25 10:16:32
満足100pt
画像と、文字列が入る要素の順序を入れ替えてますけど、ふたつほど。

画像だけに float: right; を指定する。
```
<style>
.koyouso{
    /* ※ float と width の指定を外す
    float:left;
    width:95%;
    */
    display:inline;
}
.gazou {
    background:url('../img/img.png') no-repeat scroll center;
    float:right;
    width:24px;
    height:24px;
    display:inline;
}
</style>
<div>
<span class='gazou'>画像</span>     
<span class='koyouso'>子要素</span>
</div>
```
↑だと、文字列は、画像の下に流れ込む（float の普通の動作）感じになります。
もし、文章が入る領域の幅を一定にして、画像の下は空けておきたいのであれば、こんな感じ。
```
<style>
.koyouso {
    display:block;          /* ※ */
    padding-right: 30px;    /* ※24px 以上、右側の padding を取る */
}
.gazou {
    background:url('../img/img.png') no-repeat scroll center;
    width:24px;
    height:24px;
    display:block;          /* ※ */
    position: absolute;     /* ※ */
    right: 10px;            /* ※親要素の padding などに合わせて調整 */
}
</style>
<div>
<span class='gazou'>画像</span>     
<span class='koyouso'>子要素</span>
</div>
```
スター
- 3件のコメントを見る
- jinchangz 2013/04/26 09:16:02
  
  回答ありがとうございます。
  実際やってみましたが画像右端に表示しようとすると
  思った通りの表示にならないみたいです。
  仕方ないのでjavascriptでスタイルをいじるようなやり方を検討してみます。
  
  スター
- a-kuma3 2013/04/26 09:54:22
  実際やってみましたが画像右端に表示しようとすると
  思った通りの表示にならないみたいです。
  他のスタイル指定が影響しているのかなあ...
  jsFiddle に回答の内容を置いてみました。
  単純な float: right
  http://jsfiddle.net/a_kuma3/z4AhV/embedded/result/
  position: absolute
  http://jsfiddle.net/a_kuma3/3vF5Q/embedded/result/
  
  スター
- jinchangz 2013/04/26 10:38:17
  
  「他のスタイル指定が影響しているのかなあ...」
  ↑おそらくその通りだと思います。
  動的にコンテンツの内容を変えたりしているので
  悪さをしてるのかもしれません。
  返信ありがとうございます。
  
  スター

HTML+CSSの要素の配置についての質問です。

ベストアンサー

a-kuma32013/04/25 10:16:32
満足100pt

jinchangz 2013/04/26 09:16:02

a-kuma3 2013/04/26 09:54:22

jinchangz 2013/04/26 10:38:17

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

HTML+CSSの要素の配置についての質問です。

ベストアンサー

a-kuma32013/04/25 10:16:32 満足100pt

jinchangz 2013/04/26 09:16:02

a-kuma3 2013/04/26 09:54:22

jinchangz 2013/04/26 10:38:17

その他の回答

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

a-kuma32013/04/25 10:16:32
満足100pt