Android 在不同选项卡中对齐图像和div而不使用媒体查询

我正在编写一个混合移动应用程序，它只针对平板电脑。代码如下： HTML:

在7英寸选项卡中，如屏幕截图所示： 在10英寸选项卡中，如下图屏幕截图所示： 您可以看到，7英寸标签和10英寸标签应用程序之间存在很大差异。我希望图像和报价名称在相同的位置，无论标签大小。我不想使用媒体查询。我怎么做？ 7英寸标签的像素大小约为1024*600。 10英寸标签的像素大小约为1280*800

只需删除所有浮动：左行几乎解决了问题。此外，必须移除claimbtn填充顶部，并且提供框具有最大宽度，以限制小屏幕上的div。最后一些文本对齐：居中移动所有文本到正确的位置。这是您要的和相应的：

---

我甚至不能复制你的结果：请尝试更详细地表达你想要的结果应该是什么样子，以及哪些部分以何种分辨率显示。单是平板电脑的英寸大小就没有关于其纵横比、像素密度甚至浏览器或操作系统版本的信息。此外，你还将问题标记为[ios]，但你只是在谈论android屏幕…@Daniel:你没有添加引导库。请检查更新的JSFIDLE：请检查更新的问题

<div class="col-sm-12 col-md-12">
                            <div class="col-sm-5 col-md-5" style="padding-top: 10%;">
                                <div class="imgOne_wrapper center-block">
                                    <img src="images/french.jpg" id="imgOne" class="img-responsive">
                                </div>
                            </div>
                            <div class="col-sm-7 col-md-7">
                                <div class="center-block">
                                    <div class="offer_orange_text center-block">
                                        <div class="offer_orange_txt_inner">french fries bonanza!</div>
                                    </div>
                                    <div id="claims">
                                        <p class="center-block">Order dishes for Rs. 300 and get free french fries!</p>
                                    </div>
                                    <div id="expires">This offer expires on 31 August 2015</div>
                                    <!-- <div id="share">
                                        <p>Share this offer on</p>
                                        <ul class="share-buttons">
                                            <li>
                                                <a href="#" target="_blank"><img src="images/Facebook.png"></a>
                                            </li>
                                            <li id="twitter">
                                                <a href="#" target="_blank" title="Tweet"><img src="images/Twitter.png"></a>
                                            </li>
                                            <li id="google">
                                                <a href="#" target="_blank" title="Share on Google+"><img src="images/Google+.png"></a>
                                            </li>
                                        </ul>
                                    </div> -->
                                    <div id="claimbtn">
                                        <a href="#" class="center-block">Claim this offer!</a>
                                    </div>
                                </div>
                            </div>
                        </div>  

.imgOne_wrapper {
    border: 5px solid #000;
    width: 79%;
    height: 445px;
    padding: 2%;
}

#imgOne {
    height: 419px;
}

.offer_orange_text {
    width: 460px;
    padding: 8px;
    background: #B9B60A none repeat scroll 0% 0%;
    float: left;
    margin-top: 16%;
    margin-left: 3%;
}

.offer_orange_txt_inner {
    width: 442px;
    float: left;
    border: 1px dashed #FFF;
    padding: 8px;
    font-family: 'times_newroman';
    font-size: 26px;
    color: #FFF;
    line-height: 36px;
    text-transform: uppercase;
}

#claims p{
    padding-top: 5%;
    width: 100%;
    float: left;
    font-size: 24px;
    color: #666;
}

#expires {
    width: 100%;
    float: left;
    font-size: 24px;
    color: #666;
    padding-bottom: 5%;
}

#share {
    padding-top: 30%;
}

#share p {
    font-size: 20px;
    color: #666;
}

ul.share-buttons {
    list-style: none;
    padding: 0;
}

ul.share-buttons li {
    display: inline;
}

#twitter,
#google {
    padding-left: 4%;
}

#claimbtn {
    padding-right: 5%;
    padding-top: 43%;
}

#claimbtn a {
    width: 250px;
    height: 50px;
    display: block;
    background: #027dff;
    border-radius: 3px;
    text-align: center;
    line-height: 48px;
    font-size: 24px;
    color: #FFF;
    margin-top: 10%;
    text-decoration: none;
}  

.imgOne_wrapper {
    border: 5px solid #000;
    width: 79%;
    height: 445px;
    padding: 2%;
}

#imgOne {
    height: 419px;
}

.offer_orange_text {
    max-width: 460px;
    padding: 8px;
    background: #B9B60A none repeat scroll 0% 0%;
    text-align:center;
    margin-top: 16%;
}

.offer_orange_txt_inner {
    max-width: 442px;
    border: 1px dashed #FFF;
    padding: 8px;
    font-family: 'times_newroman';
    font-size: 26px;
    color: #FFF;
    line-height: 36px;
    text-transform: uppercase;
}

#claims p{
    padding-top: 5%;
    width: 100%;
    font-size: 24px;
    color: #666;
    text-align:center;
}

#expires {
    width: 100%;
    font-size: 24px;
    color: #666;
    padding-bottom: 5%;
    text-align:center;
}

#share {
    padding-top: 30%;
}

#share p {
    font-size: 20px;
    color: #666;
}

ul.share-buttons {
    list-style: none;
    padding: 0;
}

ul.share-buttons li {
    display: inline;
}

#twitter,
#google {
    padding-left: 4%;
}

#claimbtn {
    padding-right: 5%;
}

#claimbtn a {
    width: 250px;
    height: 50px;
    display: block;
    background: #027dff;
    border-radius: 3px;
    text-align: center;
    line-height: 48px;
    font-size: 24px;
    color: #FFF;
    margin-top: 10%;
    text-decoration: none;
}