web-dev-qa-db-ja.com

テキストに基づいて<div>のサイズを自動的に変更しますか？

次の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クラスの元の高さを保持）。

実際のテキストに基づいて幅を計算する必要があるかどうか、またはテキストを拡大できる幅設定でテキストを適用する方法があるかどうかはわかりませんでした。

入力や提案は大歓迎です！

csshtmlwidthautosize
12
lhan

ここをクリック 従来のfloating elementsアプローチ

14
AzDesign

このプロパティをcssに追加します。

 .based-on-text{
   display: inline-block;
 }

このように、divはブロックのように機能しますが、親レベルの幅全体を取得する代わりに、必要な幅を正確に持ちます！

24
Yann Chabot

このフィドル （ここをクリック） はinline-block divでtext-labelと小さなJSを使用して、境界線のある外側のボックスの幅を設定します。

これはjavascriptです。かなりugい。おそらくもっと良い方法があります：

$(".label").css("width", 
    parseFloat( $(".label-image").css("width")) 
    + parseFloat( $(".label-text").css("width"))
);
2
Lee Meador