html - 在移动设备上查看时，3 个并排的 div 不会垂直堆叠

Question

我有三个并排放置的 div(在显示器上)，每个都有一个背景图像(通过 CSS)和 float 在每个背景之上的文本(通过 html)。这三个 div 被一个容器 div 包围，容器 div 在页面上将所有三个 div 居中。我希望这些 div 在移动设备上查看时垂直堆叠。有什么建议么？这是测试页:http://worddiva.com.s40758.gridserver.com/?page_id=649

这是 html(下面是 CSS):

<div style="margin: 0 auto; width:744px;">
<div style="float: left; width: 248px;">
<div id="parchment">
<img id="parchmentbg" src="http://worddiva.com.s40758.gridserver.com/wp-content/uploads/2014/07/Parchment-Grade-Orange.png"/>
<p id="text">
<span class="storytellingorange"><strong>Editorial</strong></span>
– Credit Union
– Wine &amp; Travel
– Arts &amp; Letters
– Alternative Energy
</p>
</div>
</div>

<div style="float: left; width: 248px;">
<div id="parchment">
<img id="parchmentbg" src="http://worddiva.com.s40758.gridserver.com/wp-content/uploads/2014/07/Parchment-Grade-Orange.png"/>
<p id="text">
<span class="storytellingorange"><strong>Editorial</strong></span>
– Credit Union
– Wine &amp; Travel
– Arts &amp; Letters
– Alternative Energy
</p>
</div>
</div>

<div style="float: left; width: 248px;">
<div id="parchment">
<img id="parchmentbg" src="http://worddiva.com.s40758.gridserver.com/wp-content/uploads/2014/07/Parchment-Grade-Orange.png"/>
<p id="text">
<span class="storytellingorange"><strong>Editorial</strong></span>
– Credit Union
– Wine &amp; Travel
– Arts &amp; Letters
– Alternative Energy
</p>
</div>
</div>
</div>

这是 CSS:

#parchment
{
    height:133px;
    width: 744px;
    position:relative;
    margin-left: auto;
    margin-right: auto;
}

#parchmentbg
{    
    position:absolute;
    left:0;
    top:0;
}
#text
{
    z-index:100;
    position:absolute;
    line-height: 1.3em;  
    left:10px;
    top:-15px;
}

Answer 1

#parchment 的父 div 具有固定宽度。这导致子 div 不会相互堆叠，因为父 div 没有变小。