Question

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

如果缩小输出窗口，则所有3个红色框都会进入新行。相反，我只想将一个红色框放入新行，右边是绿色框。

我需要这个的原因是因为我想创建真正流畅的网站，宽度为100％，我不想使用bootstrap，网页编程最好用基本组件完成。

代码：

<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

div包装的优先级，将包装内部或外部div？

1 个答案: