Question

在尝试提问之前，我实际上已经看过并研究了很多。所以我使用960 css框架，他们为我提供了div来布局我的网站。

html在这里......

<div id="header">  
<div class="container_12">
    <div class="grid_5">
            EMPTY
    </div>
    <div class=" nav grid_7">
            EMPTY
    </div>
</div>
</div>

两个div元素在全尺寸屏幕上很好地相邻，但是当我调整它的大小时，屏幕右边的div元素会在它下面包裹。我被告知要使用显示内联块和空白没有换行，但我不知道如何解决它，也不知道它意味着什么。

有人会善意为我彻底解释一下吗？谢谢！

Answer 1

960网格系统没有响应，并假设最小容器宽度为960像素。所以你真正需要做的就是将它添加到你的CSS：

.container_12 { min-width: 960px; }

如果您需要响应式网格系统，建议您熟悉Bootstrap。

Answer 2

也许使用Flexbox的东西...注意这个你也可以让两个div占用相同数量的列空间，如果你愿意将grid_5的flex设置为“1 1 auto”。

.container_12 {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap; /* Note that this is actually the default value... just putting here for educational purposes */
}
.grid_5 {
  flex: 0 0 auto;
  }
.grid_7 {
  flex: 1 1 auto;
  }

<div id="header">  
<div class="container_12">
    <div class="grid_5">
            EMPTY
    </div>
    <div class=" nav grid_7">
            EMPTY
    </div>
</div>
</div>

如何防止div包装？

2 个答案: