十六列网格布局：第二个div不会向右推

Question

我正在修改我的网站，该网站使用带有16列网格布局的样式表。我试图制作一个左侧很大的自定义页面，右侧或多或少是一个较窄的侧边栏：

http://tecinfrared.com/the-backyard-development-ii/

屏幕截图：

到目前为止，这是我的简单html：

<div class="sixteen columns"><!-- Sixteen Columns Layout Start -->

    <div class="twelve columns" style="background-color:#ff9900;">
         left
    </div>
    <div class="four columns" style="background-color:#99ff00;">
         right
    </div>

</div><!-- Sixteen Columns Layout End -->

我期望发生的是＆＃34;对＆＃34; div（lime lime）排列在＆＃34; left＆＃34;的右边。或橙色div。我创建了一个使用浮点数的页面，但问题是它没有响应，所以在移动设备上，侧边栏div必须推到左列div之下。

我认为这个css＆amp; html应该与Zurb的Foundation响应框架类似，其中div对于较小的屏幕将垂直下降，但是水平排列以获得更宽的屏幕。

Answer 1

添加此CSS

.columns {
  display: inline-block;
 }

为了允许并排显示这些元素。

如果您不喜欢元素之间的边距，也请将margin: 0 !important;添加到该规则中。