下記のような内容(1)のhtmlをcssのfloatを利用して回り込みさせていますが、画像の縦幅より文字が多くなると画像の下にはみ出てしまいます。
tableタグは利用せずに、どのようにcssを指定することで回避できました。(2)既に一度質問をしています。
http://okwave.jp/kotaeru.php3?qid=2419373
しかし画像と文字の間に間隔が入ってしまい困っています。
間隔をあけないようにするにはどうしたら良いでしょうか。
marginやpaddingやwidthをいじりましたがその場しのぎのようでブラウザによってはうまく表示できません。
(1)
<img src="■">aaaaa
↓結果
■aaa
aa
(2)
imgはfloat:left
textはfloat:right
<img src="■">aaaaa
↓結果
■__aaa
___aa
(アンダーパーはスペースを示す)
■とaaaにあるスペースを、10pxほどにしたい。
No.5ベストアンサー
- 回答日時:
右に寄せるという言い方は、良くなかったですね。
右に寄せる場合はfloat:rightでいいんですが、この場合、左に詰めたものの右に並べて置く訳だから、要素を左上から順番に詰めていってる状態ですよね。
つまり左詰めなので、float:leftです。
ありがとうございます。
いろいろ調べましたが、配置した反対側に後続の要素が回り込むみたいですね。
aaaaaの後続の要素にhrを置いていましたが、この場合hrに対してaaaaaが左に回りこんで、結果として左に詰まったと理解しました。
しかし、上記例では■とaaaaaは1つなのですが、hrを区切りに複数並べており、float:rightで間隔が開くものと開かないものがでるようで、これがバグなんだろうと理解しました。
No.4
- 回答日時:
念のため#3の訂正です。
<img src="×××.gif" alt="" width="100" height="50" class="img1" />
この最後の /> はxhtmlの書き方なので、htmlでは普通に > でokです。
いつもの癖でつけちゃいました。
No.3
- 回答日時:
【html】
<img src="×××.gif" alt="" width="100" height="50" class="img1" />
<div class="textbox">
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
<p>テキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
【css】
img.img1{
float:left;
}
div.textbox{
width:100px;
float:left;
padding-left:10px;
background:#999;
}
右に寄せたいからfloat:rightにするのではなく、float:leftに続く要素は同じくfloat:leftでOKです。
floatした要素にはwidthの指定も必須ですが、img要素はそれ自体に幅があるのでcss側では指定してません。
IEには、floatした要素と同じ側のmarginが倍になるというバグがあるのでpaddingにしています。つまりfloat:leftの場合、左側のmarginが倍になります。paddingが嫌な場合は、imgに対してmargin-rightを指定してください。
もうひとつのやり方として、floatに続く要素に画像の幅分のmarginを付けるという手もあります。
【css】
img.img1{
float:left;
}
div.textbox{
padding-left:110px;/*画像の幅+10px*/
background:#999;
}
ありがとうございます。
floatをrightからleftに直して、paddingを調整したら直りました^^
>右に寄せたいからfloat:rightにするのではなく、float:leftに続く要素は同じくfloat:leftでOKです。
なぜ、float:leftに続く要素は同じくfloat:leftでOKなんですか?
No.2
- 回答日時:
ちょっと丁寧に修正^^;
CSS部分
div {
width: ボックスの幅px;
clear: both;
}
.left {
float: left;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
border: none;
}
HTMLソース部分
<div><p><img src="■" class="left">あああああ<br>あああああ<br>ああああああ</p></div>
<div><p><img src="■" class="left">いいいいい<br>いいいいい<br>いいいいいい</p></div>
No.1
- 回答日時:
<p><img src="■" style="float: left; padding-right:10px; border: none;">ああああ<br>あああああ<br>ああああ</p>
という感じでは?
padding-right:の記述で間隔調整出来るかと。
img {
float: left;
padding-right: 10px;
border: none;
}
で
<p><img src="■">あああああ<br>あああああ<br>ああああああ</p>
と別途記述の方がスマートですが。
ありがとうございます。
間隔で調整できないくらい何故か幅が空いてしまって^^;
無理に調整すればできることはできるのですがNo.3さんの仰るとおりバグのようです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
CSS、width100%でもできる余白
-
css 画像の一部分をリンクにし...
-
borderをページの下まで伸ばしたい
-
【CSS】ヘッダーの高さが不明の...
-
Firefoxで見るとli要素レイアウ...
-
ウインドウを小さくするとbody...
-
リンクの下線と文字の間隔を開...
-
W3Cのソースコードの検証サービ...
-
CSS(0の単位)について
-
投稿フォームの整列
-
テーブルタグの属性をスタイル...
-
【CSS】bodyとbottomの画像がか...
-
画像イメージの上下左右、欲し...
-
<li>の黒い点を消したい。
-
firefoxでdivタグ要素が突き抜ける
-
widthやheightの数値に単位(px...
-
ブログでのサイドメニュー(プ...
-
画像の位置指定
-
【HTML】【CSS】【Swiper】 元...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
余分な縦スクロールバーが出て...
-
<div>と<div>の間の10px程の...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報