6

最初の子要素の幅と等しい幅を親要素に適用する必要があるという要件が 1 つあります。これは、子要素が 1 つしかない場合、display: inline-blockまたは親要素を使用して簡単に実現できます。float: leftしかし、div に 3 つ以上の子要素があります。このようなもの：

フィドル

<div class="main">
    <div class="first">first</div>
    <div class="value">valuevalue</div>
</div>

現在、display: inline-block親要素に適用すると、2 番目の子要素の幅になります。

ここに画像の説明を入力

これが起こらないように、2 番目の子要素の css プロパティを試しbreak-wordましword-breakたが、まだ使用できません。

私が取得しようとしているものは、次のスクリーンショットに示されています。

ここに画像の説明を入力

いくつかの重要なポイント:

  • 親要素の幅は、最初の子要素と等しくなければなりません。
  • 親要素の高さは、すべての子要素の合計と等しくなければなりません。
  • 最初の子要素の幅がわかりません。
  • (編集) 最初の子要素の幅と高さは固定されています。私はこれらの値を知りません。

cssだけでやりたい。css3 は大歓迎です。（JavaScriptを使用してこれを行う方法を知っています）

4

6 に答える 6

3

CSS3 の新しい組み込みおよび外部幅の値 (この cas の最小コンテンツ) を使用してこれを簡単に達成できますが、IE ではサポートされていないため、実行可能なオプションではありませんが、興味深いのでこれを投稿します。将来それを行うには：

http://jsfiddle.net/S87nE/

HTML:

<div class="main">
    <div class="first">first</div>
    <div class="value">valuevaluevalue</div>
</div>

CSS:

.main {
    background-color: cornflowerblue;
    width: -moz-min-content;
    width: -webkit-min-content;
    width: min-content;
}
.first {
    width: 50px;    /* I don't know this width */
    height: 50px;    /* I don't know this height */
    background-color: grey;
}

.value{
    word-break: break-all;
}

最悪の場合、これを新しいブラウザーに使用し、JS を IE および古いバージョンに使用できると思います。

参照：

于 2013-09-23T13:13:03.880 に答える
0

Fiddle リンクに対する私の最新のコメントを見てください。html もいくつか変更しました。最初の div 内に値 div を設定して幅を使用し、値 div に word-wrap を追加しました。

.main {
    display: inline-block;
    background-color: cornflowerblue;
    position: relative;
}
.first {
    width: 50px;  /* I don't know this width */
    position: relative;
    background-color: grey;
}

.first p {
    margin-bottom: 30px;
    margin-top: 0;
}

.value {
    max-width: 100%;
    word-wrap:break-word;
    background-color: cornflowerblue;
}

html:

<div class="main">
    <div class="first">
        <p>first</p>
        <div class="value">valuevalue</div>
    </div>
</div>

http://jsfiddle.net/jxw4q/12/

于 2013-09-23T10:07:14.873 に答える