最も簡単な質問をしたいと思います。私は jQuery を利用して、margin-left または padding に CSS を次のように適用しています。
margin: 0px 0px 0px 156px
すべての動的コンテンツをウィンドウの特定のピクセル値にシフトする必要があります。(ウィンドウ サイズから計算された値は 160px です) 動的コンテンツには、次のようなプロパティが含まれます。
padding-left: 2px;
text-align: right;
font-size: 91%;
font-weight: bold;
問題:コンテンツに 1 文字 (「A」など) が含まれている場合、左から 156 ピクセルの位置にある必要があります。その後、「B」という別の文字が来ると、さらに 8 ピクセルが必要になるため、左シフトには 148 ピクセルが必要です。しかし、コンテンツが小文字の場合は、要件を満たすために何個のピクセル値を指定する必要があるかを判断するのが難しくなります。また、「I」の文字を配置すると、約 4 ピクセルかかります。
異なる文字には異なる間隔が関連付けられているため、上記は実行可能ではないようです。
動的コンテンツを左から 160 ピクセルの位置に配置する必要があります (左から 160 ピクセルの架空のコンテンツと共に)。
jQuery や Java Script を使用しない場合、CSS を介して実行できるかどうかを教えてください。
編集：
一部の HTML コンテンツ:
次のように、iFrame コンテンツを含むメイン ページにアラインメントを配置したいと考えています。
<iframe
frameborder="no"
height="200px"
id="06690000002ravz"
marginheight="0"
marginwidth="0"
name="06690000002ravz"
scrolling="no"
title="Rule1"
width="100%">
<label id="j_id0:j_id2:j_id3:theField" class="labelCol">
abcX
</label>
</iframe>
abcXは、メイン ページで受信している動的コンテンツです。
これを受け取るたびに、コンテンツは自動的に整列されるはずです。
PS: それらの間の通信はありません (同じドメインからのものではないため)。つまり、外側の要素やウィンドウのサイズなどを取得するための document.parent.getElementById を取得できません。