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>

個々の div と .button-container に display: inline と display: inline-block を使用してみました。

これが私の最新のスタイルです：

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 に答える