在不使用媒体查询的情况下对齐各种选项卡中的图像和 div答案

【问题标题】：Aligning images and divs in various tabs without using media queries在不使用媒体查询的情况下对齐各种选项卡中的图像和 div
【发布时间】：2015-08-25 23:19:38
【问题描述】：

我正在编写一个仅针对平板电脑的混合移动应用程序。这是代码：
jsfiddle link HTML:

<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>

css:

.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;
}

在 7 英寸标签中，如屏幕截图所示：

在 10 英寸标签中，如下图所示：

您可以看到 7 英寸选项卡和 10 英寸选项卡应用程序之间存在相当大的差异。无论标签大小如何，我都希望 image 和 offer name 处于相同的位置。我不想使用media queries。我该怎么做？
7 英寸标签的像素大小约为 1024*600。
10 英寸标签的像素大小约为1280*800。

【问题讨论】：

我什至无法重现您的结果：jsfiddle.net/0s4s5to8 请尝试更详细地表达您想要的结果应该是什么样的，以及在哪种分辨率下显示哪些部分。（仅平板电脑的英寸大小没有关于其纵横比、像素密度甚至浏览器或操作系统版本的信息）此外，您将问题标记为 [ios] 但您只是在谈论 android 屏幕...
@Daniel：你没有添加引导库。请检查这个更新的 jsfiddle：jsfiddle.net/0s4s5to8/1
请检查更新的问题

标签： android html css twitter-bootstrap-3

【解决方案1】：

只需删除所有float:left 行就几乎可以解决问题。另外 claimbtn padding-top 必须被删除，offer 框有一个 max-width 以限制小屏幕上的 div。最后一些text-align: center 将所有文本移动到正确的位置。给你（以及对应的fiddle）：

.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;
}

【讨论】：