1

我正忙于我第一次尝试响应式网页设计，我正在尝试将 2 张图片并排放置。当我在台式计算机上查看网站时，页面布局很好。但是当我在移动设备上查看它（或者我调整窗口大小）时，底部的 2 个图像不再是内联的，而是相互重叠。

知道如何解决这个问题吗？该页面位于此测试主机上：www.igga.nl。

这是我的标记：

@media screen and (max-width: 568px) {

#footer {
    position: fixed;
    left:0px;
    bottom:0px;
    height: 110px;
    border-top: 7px solid #fff;
    background-image: url('../images/bg_footer.png');
    background-repeat: repeat;
    width: 100%;
}

#pos {
    width: 100%; /* parent */
}
#footer-info {
    width: 100%;
    float: left;
}
#centerpos {
    width: 94%;
    margin: 0 auto;
}

.tree {
    float: left;
    margin: 10px 1.76056338028169% 0 0;
    width: 6.69014084507042%; /* 427 / 960 */
}

.logo-cont {
    border-bottom: 0;
}

.logo {
    margin-top: 18px;
    width: 91.54929577464789%;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}
.info-cont {
    clear: both;
    width: 100%;
    margin: 2px 0 0 8.45070422535211%;
}

.info {
    margin: 3px 0 0 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    font-size: 0.875em;
}

.info a {
    display: inline;
    text-transform: lowercase;
    text-decoration: none;
    color: #000;
}

.info-telnr {
    margin: 3px 0 0 0;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    font-size: 0.875em;
}

.info-telnr h5 {
    display: inline;
    text-transform: lowercase;
    text-decoration: none;
    letter-spacing: 1px;
    color: #000;
    font-size: 1em;
}
}

这是我的 HTML：

<div id="footer">
    <div id="pos">
        <div id="footer-info">
            <div id="centerpos">
                    <img class="tree" src="sites/all/themes/md/images/logo_tree.png">   
                <div class="logo-cont">
                    <?php if ($logo): ?>
                    <a href="<?php print $front_page; ?>" title="<?php print t('MD | Illustration & Design'); ?>" rel="home" id="home">
                    <img class="logo" src="<?php print $logo; ?>" alt="<?php print t('MD | Illustration & Design'); ?>" />
                    </a>
                    <?php endif; ?>
                </div>
                <div class="info-cont">
                <div class="info">
                    mail&nbsp;<a href="mailto:info@example.nl">info@example.nl</a>
                </div>
                <div class="info-telnr">
                    phone&nbsp;<h5>+31600000000</h5>&nbsp;
                </div>
                <div class="info">
                    shop&nbsp;<a href="http://www.thepossiblemachine.nl" target="_blank">www.thepossiblemachine.nl</a></p>
                </div>
                </div>
            </div>
        </div>
</div>
4

1 回答 1

0

尝试为两个 div/图像设置 float:left。它在很多情况下都有帮助，但我不知道如果没有代码它是否对您的问题有用。它应该看起来像：

<div id="image1" style="float:left">
   <img src="images/yourimage1" alt=""/>
</div>
<div id="image2" style="float:left">
   <img src="images/yourimage2" alt=""/>
</div>

我希望这有帮助。

于 2013-07-04T22:00:08.747 回答