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-block让它们保持在同一行，但div.alert它block会出现在字段其他内容下方的新行上。

  2. div.field只有 MIN-WIDTH （不是宽度或最大宽度），因为当用户调整窗口大小（以及 的宽度div.container）时，应该会发生以下情况：

    一个。如果该字段的固定宽度内联内容（在本例中为 LABEL+INPUT=300px）小于 25% 的宽度div.container，则div.field应该正好是容器宽度的 25%。

    湾。如果字段的固定宽度内联内容超过容器的 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 回答