div包装的优先级，将包装内部还是外部div？答案

【问题标题】：Precedence of div wrapping, will wrap inner or outer div?div包装的优先级，将包装内部还是外部div？
【发布时间】：2015-01-29 22:48:24
【问题描述】：

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

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

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

代码：

<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;
}

【问题讨论】：

标签： css

【解决方案1】：

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

.content {
    display:inline;
}

JSFiddle demo.

【讨论】：

如何防止红色框在换行时对齐到最左端？它应该在绿色框的右边对齐。
@ToneŠkoda 我不明白你的意思，抱歉。