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

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

子要素と画像を2つ横に並べるために子要素1に
.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の固定にし、左の子要素は可変長を維持するようなスタイルを定義したいのですが
可能でしょうか?
詳しい方お助けください。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/04/25 09:28:50
  • 終了:2013/05/02 09:30:03

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4562ベストアンサー獲得回数19062013/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>
他1件のコメントを見る
id:a-kuma3

実際やってみましたが画像右端に表示しようとすると
思った通りの表示にならないみたいです。

他のスタイル指定が影響しているのかなあ...
jsFiddle に回答の内容を置いてみました。

2013/04/26 09:54:22
id:jinchangz

「他のスタイル指定が影響しているのかなあ...」
↑おそらくその通りだと思います。
動的にコンテンツの内容を変えたりしているので
悪さをしてるのかもしれません。
返信ありがとうございます。

2013/04/26 10:38:17

コメントはまだありません

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

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません