-
ID:ra6b.e さんの質問

HTML・CSSでのレイアウトが思ったようにいかず困っています。

画像がなくなった場合はタイトルと文章は画像がない分
横に伸びるようにしたいので
タイトル 画像 文章 それぞれにwidhtを指定せずに

タイトル          ■■■■
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄■画像■
ここに文章がはいります。ここ■■■■
に文章が入ります。

としたいのですが
タイトルの下に設定したborder-bottomが伸びず

タイトル          ■■■■
 ̄ ̄ ̄ ̄          ■画像■
ここに文章がはいります。ここ■■■■
に文章が入ります。

となってしまいます。

■HTML
<div>
<h2>タイトル</h2>
<span><img alt="画像" src="" ></span>
<p>こここに文章がはいります。ここに文章がはいります。</p>
</div>

■CSS
div{width:600px;}
h2{float:left; border-bottom:1px solid #000;}
span{float:right;}
p{clear:left;}

どなたかおわかりになる方がいらっしゃいましたら、助言いただきたいです。

みんなの回答 4 件

ID:Xzj1EL さんの回答

h2にdisplay:block;指定して、h2にwidthで画像までの値入れてやれば良いんだと思うよ。確認してないけど。
あと、pでclearすると画像の下に文章が来るから、出してるように画像で折り返すならその後の要素でclearしないとそのようにはならないかな。
spanもいらない。img要素にfloatかけてやればいいかな。
確認しないで思いつきで言ってるから違ったらごめん。

ID:ra6b.e

ご回答ありがとうございます。
h2にwidthを指定すると、画像を取った時にborderが横いっぱいまで伸びずにwidthを指定した位置でborder切れてしまうのでwidthの指定をせずになんとかならないかと考えてました。

文章折り返しのclearとimg要素へのfloat、参考にさせていただきます。
考えてくださりありがとうございます。

ID:l.LIfd さんの回答

h2とpをdivで囲って、divにfloat:left;、h2にwidth:100%;を指定
divとimgのwidthを%で指定じゃダメなん?

imgを外すときはdiv {width:100%}も一緒に指定すれば画像外しても伸びるし

ID:ra6b.e

ご回答ありがとうごいざいます。
確かにwidthを指定すれば可能ですね
しかし今回は画像がある場合と外した場合をクラスを切り替える事なく実現できないものかと考えていました。

考えてくださり感謝です。

ID:5FkJ4t さんの回答

htmlの順序がおかしいけど、レガシーブラウザも対応するならこうするしかないんじゃないの

Edit this Fiddle - jsFiddle

http://jsfiddle.net/KyBc3/
ID:ra6b.e

ご回答ありがとうございます。
<h2>の下に画像を収めるのが理想的ですが
これはまさに私がしたかった理想のレイアウトです。
疑似要素には馴染みがなかったので、大変勉強になります。
参考にさせていただきます。

jsFiddleでのわかりやすい説明も感謝いたします。

ID:6ihdmc さんの回答

直接的なアドバイスではないけど、
JavaScript+jQueryを覚えればこのくらいの制御なら簡単にできるようになるよ。

ID:ra6b.e

ご回答ありがとうございます。
今回はCSSのみでの制御が目標でしたが、
確かにCSSに固着せずにJavascript+jQueryでの制御も視野に入れて考えれば、もっと簡単に実現できそうですね。

アドバイスありがとうございました。
JS+JQueryにも柔軟に視野を広げて考えていこうと思います。

ID:IuM/sL

レイアウトやデザインにJSを介入させるのは、最終手段だよね。どうしようもないときだけ。JSを使うぐらいならそのデザイン諦める場合の方が多い気がする。

最終更新日:2013-07-10 (5,610 views)

関連するトピックス

ページ上部に戻る