我正在开发一款适用于Android的JQM和PhoneGap应用。
在第一页,我想要两个按钮,在整个高度上都有自己的图像
我试过用两个按钮。 css中div的高度为100%,但这不起作用。还有其他建议吗?
或另一种解决方案(甚至更好): 页面分为两部分(高度均为50%)。 第1部分:包括一个带图像1的按钮 第2部分:包括带图像2的另一个按钮 问题:图像非常大,但我不想滚动页面
** CSS和HTML **
#test {
height: 100%;
}
.image {
width: 95%;
height: auto;
}
#button1 {
width: 70%;
margin:auto;
}
#button2 {
width: 70%;
margin:auto;
}
<div data-role="content">
<div id="test">
<a data-role="button" data-theme="a" id="button1" href="#about"><br /><img src="images/about.png" class="image"/>about</a>
<br />
<a data-role="button" data-theme="b" id="button2" href="#product"><br /><img src="images/product.png" class="image"/>product</a>
</div>
</div>
答案 0 :(得分:0)
这是一个主要适用的CSS解决方案。
<强> DEMO FIDDLE
每个按钮都在DIV容器中,按钮文本也在DIV中(我从谷歌图片搜索中随机选择900x900图像):
<div data-role="content" id="contentdiv">
<div class="btnContainer topBtn">
<a data-role="button" data-theme="a" id="button1" href="#about">
<img src="http://onlinelearningtips.com/wp-content/uploads/2012/12/Mars-geology.jpg" class="image"/>
<div class="thetext">about</div>
</a>
</div>
<div class="btnContainer btmBtn">
<a data-role="button" data-theme="b" id="button2" href="#product">
<img src="http://images.astronet.ru/pubd/2004/11/11/0001201158/jupiterTriple_hst_full.jpg" class="image"/>
<div class="thetext">product</div>
</a>
</div>
</div>
CSS然后使用绝对定位使内容div填充页面,2按钮div占用每页的一半。因为图像很大,CSS会限制最大宽度和最大高度,然后将它们居中。文本位于按钮的底部。在较小的高度,文本将出现在图像上,因为使用了百分比:
#contentdiv, .btnContainer a .ui-btn-inner, .btnContainer a .ui-btn-text {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.btnContainer {
position: absolute;
left: 0; right: 0;
height: 50%;
}
.btnContainer a {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin-left: 10px; margin-right: 10px;
}
.topBtn { top: 0; }
.btmBtn { bottom: 0; }
.thetext {
position: absolute;
bottom: 0; left: 0; right: 0;
}
img {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
margin: auto;
max-width: 90%;
max-height: 75%;
}
你可以调整百分比,边距等,使其更接近你想要的......
更新:允许页眉和/或页脚,使用内容div margin-top和margin-bottom:
#contentdiv{
margin-top: 42px;
margin-bottom: 6px;
}