次のJSを入手しましたFiddle=私が達成しようとしていることを示すために: http://jsfiddle.net/sVKU8/2/
1)この最初の部分は簡単だと思います-親label
クラスを更新して、2つの子<div>
sの合計幅に基づいてwidth
を自動的に設定する方法はありますか境界線は緑と赤の<div>
sのみを囲みますか? width: auto
を設定することでそれができると思っていましたが、私のCSSスキルは明らかに不足しています。
2)次に達成したいのは、label-text
クラスからwidth
属性を削除し、そのテキストを適用するたびに幅を設定する(または、可能であれば自動的に拡大する)ことです<div>
テキストラップなしのJavaScript経由(つまり、label
クラスの元の高さを保持)。
実際のテキストに基づいて幅を計算する必要があるかどうか、またはテキストを拡大できる幅設定でテキストを適用する方法があるかどうかはわかりませんでした。
入力や提案は大歓迎です!
ここをクリック 従来のfloating elements
アプローチ
このプロパティをcssに追加します。
.based-on-text{
display: inline-block;
}
このように、divはブロックのように機能しますが、親レベルの幅全体を取得する代わりに、必要な幅を正確に持ちます!
このフィドル (ここをクリック) はinline-block
divでtext-label
と小さなJSを使用して、境界線のある外側のボックスの幅を設定します。
これはjavascriptです。かなりugい。おそらくもっと良い方法があります:
$(".label").css("width",
parseFloat( $(".label-image").css("width"))
+ parseFloat( $(".label-text").css("width"))
);