html - 将 DIV 包裹到内容仅在内容位于一行时包裹

Question

我正在尝试将多个包装fieldsets在一个环境div中。当浏览器足够大以容纳fieldsets一行中的所有内容时，div 包装 OK，但是当它们流到下一行时，div 边框会捕捉到浏览器窗口（Chrome）的右边缘。在不使用设置宽度或使用 JS 的情况下如何克服这个问题？

HTML

 <div id="wrapper" class="display-inline-block">
        <fieldset id="f1" class="display-inline-block">
            <legend>F1</legend>
            <p>Lorem ipsum dolor sit amet</p>
        </fieldset>
        <fieldset id="f2" class="display-inline-block">
            <legend>F2</legend>
            <p>Lorem ipsum dolor sit amet</p>
        </fieldset>
    </div

CSS

 #wrapper
    {
        margin: 10px;
        padding: 10px;
        border: 1px solid red;
    }
    .display-inline-block
    { 
        display:-moz-inline-stack;
        display:inline-block;
        zoom: 1;
        *display: inline;
        vertical-align: top;
    }

Answer 1

在过去的 5 分钟内查看了这个，看起来除了可能是媒体查询之外，使用纯 CSS 是不可能的。