0

我有一个 12 列的行，但我需要在一行中获取一系列 div 块（4 个 div 容器）以响应并且在它到达适当的断点之前不堆叠。现在，随着浏览器变小，div 开始堆叠。

Basically I have 4 divs. They need to be in a row. 
[div1] [div2] [div3] [div4]

But when I shrink the browser I see:
[div1] [div2] [div3]
[div4]

每个 div 中都有一个图像。

这是我的代码：

<div class="row">
  <div class="twelve columns center">
    <div class="button-container">
      <div class="calendar-container left hide-for-small">
        <img src="images/poc-calendar.jpg" />
      </div>
      <div class="search-container left">
        <img src="images/poc-button-search.jpg" />
      </div>
      <div class="submit-container left">
        <img src="images/poc-button-submit.jpg" />
      </div>
      <div class="social-container left hide-for-small">
        <img src="images/poc-social.jpg" />
      </div>
    </div>
  </div>
</div>

我已经尝试使用 display: inline 和 display: inline-block 用于单个 div 以及 .button-container。

这是我的最新款式：

div.button-container {
    margin-top: 18px;
    padding-left: 10px;
    max-height: 100%;
    max-width: 100%;
    display: inline-block;
    width:100%;
}

div.calendar-container {
    margin-right: 10px;
}

div.search-container {
    margin-right: 10px;
}

div.submit-container {
    margin-right: 10px;
}

div.legend-container {
    height: 86px;
}

有任何想法吗？提前致谢！

4

1 回答 1

0

我的建议是，在您将视口缩小到足以弹出 [div1] 下的 [div4] 之后，放入一个媒体查询，以减少/删除边距/填充。

于 2013-01-05T19:59:15.187 回答