0

問題があります。画像の上にタイトルを配置してみました

  • 最初のタイトル (cat1) は小さくても長くてもかまいません
  • 2 番目のタイトル (cat 2) 最初のタイトルの直後
  • 3 番目のタイトル (右から 2 番目のタイトルの後) これらのタイトルはインラインである必要があります

私のデモ jsfiddle を参照してください http://jsfiddle.net/cyphos/jntea/]

ご回答ありがとうございます

4

1 に答える 1

1

私が理解しているように、これをどのように達成するかは、何を作成しても問題ないかによって異なります。各要素の幅を指定できれば問題ありません。次に、左右の要素の両方の幅を指定し、中央の要素をその間に配置するだけです。例として、このフィドルを参照してください。

CSSのみのフィドル

これは、単純化するために box-sizing border-box モデルを使用します。明確にするためにこれを読んでください

基本的：

.cta1 {left:0;width:150px;}
.cta2 {left:150px;right:150px;}
.cta3 {right:0;width:150px;}

また

これらの項目を動的にしたい場合は、Javascript/jQuery を使用して要素の幅を取得し、それに応じて中央の要素の プロパティleftとプロパティを設定する必要があります。rightjQuery での例

jQueryベースのフィドル

var cat1Width = $('.cat1').width();
cat1Width = cat1Width + 26; //26 being a pixel measure of the padding of the element
$('.cat2').css('left', cat1Width);

これにより、jQuery はパディングを含む幅の値を返さないため、cta1Width 変数にパディング値を追加する必要があります。これを手動で行う (ピクセル値を自分で追加する) か、jQuery を使用してパディング幅を抽出することもできます。詳細については、このスレッドを参照してください。

于 2013-07-22T14:06:34.623 に答える