div 换行的优先级，将换行内部或外部 div

Question

很难解释，看看例子：http://jsfiddle.net/tskoda/0qo8e2f6/4/

如果缩小输出窗口，则所有 3 个红色框都会放入新行中。相反，我只想将 1 个红色框放入新行，即绿色框的右侧。

我需要这个的原因是因为我想创建真正流畅的网站，具有 100% 的宽度，并且我不想使用引导程序，Web 编程最好使用基本组件完成。

法典：

<div class="sidebar">
    <div>line 1</div>
    <div>line 2</div>
    <div>line 3</div>
</div>
<div class="content">
    <div>item</div>
    <div>item</div>
    <div>item</div>
</div>

.sidebar {
    background:green;
    display:inline-block;
    /*max-width:100px;*/
}
.content {
    display:inline-block;
}
.content >div {
    display:inline-block;
    background: red;
    width:100px;
    height:100px;
}
div{
    vertical-align:top;
}

Answer 1

将.content容器设置为具有inline显示而不是inline-block。

.content {
    display:inline;
}

JSFiddle demo.