以下の例のとおり文字列の横に赤と書き赤の文字だけを装飾し右寄せします。
これはテーブルの中に書いているのですが、文字列が長くセル内で折り返し2行で
表示された際に赤の文字は3行目に右寄せされてしまいます。
これを2行目に表示させることはできないでそうか。
よろしくお願い致します。
.right {
text-align:right;
}
.aka {
background-color:#FF0000;
}
あいうえおかきくけこ<DIV CLASS="right"><SPAN CLASS="aka">赤</SPAN></DIV>
A 回答 (5件)
- 最新から表示
- 回答順に表示
No.4
- 回答日時:
<DIV style="float:left;clear:both;">あいうえおかきくけこ</DIV><DIV style="text-align:right;"><SPAN style="color:#FF0000;">赤</SPAN></DIV><DIV style="clear:both;"></DIV>
「かきくけこ」の後に (ブロック要素である) DIV 要素がある事で、改行が行われるのが普通というか、行単位で領域が確保されるというか・・・。
(背景色を指定してみれば、どこが該当領域か認識しやすいです。)
>右寄せします
これを確保された領域の中での右寄せか領域ごと位置指定して何かしら基準としたい物の右寄せかによって、
手法が変わるというか(そもそも発想が変わる・・・)
上記例示は、直前のブロック要素に float を指定する事により改行を回避しています。
ただその為に、後方に解除用の追記もあり・・・。
参考にしてみたいと思いますがやはり思い通りに、なおかつHTML4.01 Strictのチェックで完璧な採点をされるように作るには難しいかもしれません。もう少しいろいろ考えようと思います。
No.3
- 回答日時:
1行で表示出来る場合は1行で、
表示しきれない場合は「あいうえおかきくけこ」「赤」で改行するようにするには、
<TD><NOBR><span class="left">あいうえおかきくけこ<WBR>赤</NOBR></TD>
で可能ですが、
<WBR><NOBR>とも、IEとNNの独自拡張だったような気がします。
「あいうえおかきくけこ」を左寄せ
「赤」を右寄せ(下寄せ)、というのはちょっと無理がありますね。
以下はたぶんブラウザ依存で表示位置がずれるかも
floatを使うときはwidthも指定しないと、期待通り表示されないことが多いです。
.left{
display:box;
text-align:left;
float:left;
}
.right{
display:box;
text-align:right;
float:right;
}
<td>
<span class="left">あいうえおかきくけこ</span><span class="right">赤</span>
</td>
「あいうえおかきくけこ」で改行される場合は、「赤」は1行目に表示されると思います。
もともと下段揃えというのはスタイルシートでは出来ないと思いますから。
どうしても、というならテーブルが無難かも、です。
<td>
<table width="100%"><tr><td valign="top">あいうえおかきくけこ</td><td align="right" valign="bottom">赤</td></tr></table>
</td>
*動作未検証
No.1
- 回答日時:
右寄せとかセンタリングとかはブロックレベル要素を用いますので前後に強制的な改行が入ります。
コレを無理矢理行上げすると言うのは異なる環境間にて表示状態の差異が表示することを考えれば難しいかも…。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript htmlとcssで分数を表示後、分数の右側に文書を書きたい 1 2022/04/28 10:09
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<td>中の文字列に<p>は必要?
-
文章が読みやすいのは?
-
HTML 表の上に文字がきてしま...
-
ビットマップ(bmp)形式で背景...
-
編集が出来ません(JPEGフ...
-
tiffファイルをトリミングして...
-
画像審査中とはどういう意味で...
-
画像のサイズ(キロバイト)を...
-
ブログの下書きが突然消えた
-
アメーバブログに音楽を流す方...
-
画像の縮小
-
画像に人の目では見えない文字...
-
画像の背景の透明部分だけを広...
-
1Mbyteピッタリの画像ファイル...
-
ブログへの動画のアップロード
-
アイコンとバナーの違いについて
-
FC2ブログで、画像の画面中...
-
画像編集アプリで編集した画像...
-
写真をアップして家族親戚で見...
-
2MBに画像を縮小したいです...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<td>中の文字列に<p>は必要?
-
HTML 表の上に文字がきてしま...
-
一部の文字列の右寄せについて
-
こんな<form>って、基本的にあ...
-
文章が読みやすいのは?
-
ビットマップ(bmp)形式で背景...
-
FC2ブログで、画像の画面中...
-
編集が出来ません(JPEGフ...
-
質問です。 K-POPアイドルの公...
-
アイコンとバナーの違いについて
-
上司から10メガバイトの画像...
-
レンタルサーバーを借りて、物...
-
tiffファイルをトリミングして...
-
画像のペイントについて
-
バナーの直リンク禁止とは?
-
スクリーンショットをjpgやbmp...
-
1Mbyteピッタリの画像ファイル...
-
デジカメで撮った集合写真に写...
-
URLはどこを見ればわかる
-
YYMMDD
おすすめ情報