4

最小幅しかないインラインブロックdiv内でテキストを折り返すことは可能ですか？（幅でも最大幅でもない）

これが私が意味することです：

<style type="text/css">

  .container {
    width:100%;
  }

  .field {
    display: inline-block;
    vertical-align: top;
    min-width:25%;
  }

  label, input {
    display: inline-block;
  }

  .alert {
    display:block;
  }

</style>


<div class="container">

    <div class="field">
      <label style="width:100px;">My Label</label>
      <input style="width:200px;" type="text" />
      <div class="alert">
        This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text!
      </div>
  </div>

  <div class="field">...another field...</div>
  <div class="field">...another field...</div>
  <div class="field">...another field...</div>
  etc...

</div>

ノート：

  1. label＆は同じ行にとどまるようにinputなっていますが、フィールドの他のコンテンツの下の新しい行に表示されるようになっています。inline-blockdiv.alertblock

  2. div.fieldユーザーがウィンドウ（およびの幅div.container）のサイズを変更すると、次のことが発生するため、MIN-WIDTH（幅または最大幅ではない）のみがあります。

    a。フィールドの固定幅のインラインコンテンツ（この場合、LABEL + INPUT = 300px）がの幅の25％未満のdiv.container場合div.field、コンテナ幅の正確に25％である必要があります。

    b。フィールドの固定幅のインラインコンテンツがコンテナの25％を超える場合は、フィールドを合計幅まで押し出す必要があります。

div.alertそれで、上記のルールに従ってフィールドの幅に基づいてラップする方法はありますか？

4

3 に答える 3

4

私は非常に古いスレッドであることを知っていますが、それは他の誰かを助けるかもしれません。あります

.field {
    width: min-content;
}

つまり、コンテナは可能な限り縮小しません。それを使用するには、ラベルと入力が最小幅で十分な大きさであることを確認する必要があります。しかし、それらの固定サイズでそれは行われます。しかし、この場合、複数のフィールドがあると、それらは互いに隣り合ってラップされるので、私は提案します

.container {
    width: min-content;
}

これがjsfiddleです。

完全にクロスブラウザではありませんが、ほとんどです。

ここで見つけました。

于 2016-09-29T02:35:15.053 に答える
1

jQueryなしではなく、次のようなものです。

$('.alert').width($('.alert').parents('.field').width());
于 2012-09-28T05:25:14.527 に答える
0

私はこの質問に対する答えを探していましたが、テキストの周りのdivには次のものが必要であることがわかりました。

max-width: fit-content

<style type="text/css">
  .container {
    width: 100%;
  }
  
  .field {
    display: inline-block;
    vertical-align: top;
    min-width: 25%;
    margin-bottom: 20px;
  }
  
  label,
  input {
    display: inline-block;
  }
  
  .alert {
    display: block;
    max-width: fit-content;
  }
</style>


<div class="container">
  <div class="field">
    <div>With:</div>
    <label style="width:100px;">My Label</label>
    <input style="width:200px;" type="text" />
    <div class="alert">
      This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text!
    </div>
  </div>
  <div class="field">
    <div>Without:</div>
    <label style="width:100px;">My Label</label>
    <input style="width:200px;" type="text" />
    <div>
      This text should wrap at whatever width div.field actually is, and never push div.field out to the width of this text!
    </div>
  </div>
</div>

于 2022-02-23T23:40:35.023 に答える