如果水平空间不够，如何使三个DIV对齐

Question

我的asp.net页面中有以下DIV：

<div style="width: 98%; padding: 2%; overflow: auto; height: auto; margin: 0 auto;">
    <div style="float: left; width: 32%;">
        <CMS:ContentBlock ID="ContentBlock2" runat="server" CssClass="test1 green" DefaultContentID="638" ClientIDMode="Static" />
    </div>
    <div style="float: left; width: 32%;">
        <CMS:ContentBlock ID="ContentBlock3" runat="server" CssClass="test1 green" DefaultContentID="638" ClientIDMode="Static" />
    </div>
    <div style="float: left; width: 32%;">
        <CMS:ContentBlock ID="ContentBlock4" runat="server" CssClass="test1 green" DefaultContentID="638" ClientIDMode="Static" />
    </div>
</div>

以上是在HTML中生成的：

<div style="width: 98%; padding: 2%; overflow: auto; height: auto; margin: 0 auto;">
        <div style="float: left; width: 32%;">
            <div id="ContentBlock2" class="test1 green">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insuran">Most Insurance Plans Accepted</a><br />914-848-5644</span></p>
</div>
        </div>
        <div style="float: left; width: 32%;">
            <div id="ContentBlock3" class="test1 green">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insuran">Most Insurance Plans Accepted</a><br />914-848-4544</span></p>
</div>
        </div>
        <div style="float: left; width: 32%;">
            <div id="ContentBlock4" class="test1 green">
    <p align="center"><span class="info" align="left"><strong>Regular Hours:</strong><br />Monday&#160;- Friday: 8am - 9pm<br />Saturday&#160;&amp; Sunday: 9am - 5pm</span> <br /><span class="info" align="left"><a title="Most Insurance Plans Accepted" href="/participating_insuran">Most Insurance Plans Accepted</a><br />914-848-45455</span></p>
</div>
        </div>
    </div>

CSS：

.test1
{
    text-align: left;
    background: #b6ff00;
}
.test1 p
{
    text-align: left;
}

在桌面浏览器中查看它在屏幕上的位置很好：

当我缩小浏览器时，它显示如下：

我要做的是在宽度的某个断点之后，我希望它们垂直移动而不是像第二张图像所示那样继续挤压它们。我几乎希望他们在垂直方向上堆叠一个。

当浏览器尺寸变小时，如何使它们垂直移动？

Answer 1

您可以添加media query，以浏览器宽度为您的div设置 100％宽度。

示例：

@media all and (max-width: 500px)
{
  .test1
  {
      width:  100%;
  }
}

小提琴：http://jsfiddle.net/31xqrk9d/