Html 3个并列的divs赢了';t在移动设备上查看时垂直堆叠
我有三个div并排放置(在显示器上),每个div都有一个背景图像(通过CSS)和浮动在每个背景上的文本(通过html)。这三个div被一个容器div包围,容器div位于页面上所有三个div的中心。我希望这些div在移动设备上查看时垂直堆叠。有什么建议吗?以下是测试页面: 以下是html(CSS如下所示):Html 3个并列的divs赢了';t在移动设备上查看时垂直堆叠,html,css,mobile,responsive-design,Html,Css,Mobile,Responsive Design,我有三个div并排放置(在显示器上),每个div都有一个背景图像(通过CSS)和浮动在每个背景上的文本(通过html)。这三个div被一个容器div包围,容器div位于页面上所有三个div的中心。我希望这些div在移动设备上查看时垂直堆叠。有什么建议吗?以下是测试页面: 以下是html(CSS如下所示): #羊皮纸的父div具有固定宽度。这会导致子div彼此不堆叠,因为父div没有变小。签出类型。这将允许您为特定的屏幕大小和类型创建规则 <div style="margin: 0 auto
#羊皮纸
的父div具有固定宽度。这会导致子div彼此不堆叠,因为父div没有变小。签出类型。这将允许您为特定的屏幕大小和类型创建规则
<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 & Travel
– Arts & 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 & Travel
– Arts & 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 & Travel
– Arts & Letters
– Alternative Energy
</p>
</div>
</div>
</div>
#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;
}