Question

我正在撰写一款仅针对平板电脑的混合移动应用。这是代码：
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。

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

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

1 个答案: