html - 将DIV包装到内容仅在内容在一行上时包装

我试图将多个fieldsets包装在周围的div中。当浏览器足够大以将所有fieldsets放在一行上时，div会包装好，但是当它们流到下一行时，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;
    }

最佳答案

在过去5分钟的时间里对此进行了查看，除了使用媒体查询之外，使用纯CSS似乎也不可能。

关于html - 将DIV包装到内容仅在内容在一行上时包装，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19574877/