1

所以我一直在为这个 CSS 绞尽脑汁，需要有人用全新的眼光来审视它......基本上发生的事情是我有 4 列在页脚中彼此相邻，但最后一列会自动移动到第三列下方。我看不出发生了什么让它做到这一点？！

查看以下链接：

test.snowflakesoftware.com

下面是CSS：

    #mod_footer {
    width: 100%;
    background: url(images/footer.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #212530;
}
    .mod_footer_container {
        margin: 0 auto;
        width: 1200px;
        padding-top: 25px;
    }
        .mod_footer_col {
            float: left;
            width: 25%;
            padding-right: 25px;
        }
        #mod_footer_col_end {
            float: left;
            width: 25%;
        }
            #nav-bottom-left,
            #nav-bottom-left ul {list-style-image: url(images/bullet.png); font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #FFF;}
            #nav-bottom-left a {}
            #nav-bottom-left li {margin-left: 25px;}

            #nav-bottom-right,
            #nav-bottom-right ul {list-style-image: url(images/bullet.png); font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; color: #FFF;}
            #nav-bottom-right a {}
            #nav-bottom-right li {}

            p.footer_title {color: #9bcbf3;}
            p.footer {font-family: Helvetica, Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px; color: #FFF;}
            p.footer .menu-item {list-style-image: url(http://www.snowflakesoftware.com/wp-content/themes/images/bullet.png);}

    .mod_footer_container_bottom {
        clear: both;
        margin: 0 auto;
        width: 1200px;
        padding-top: 25px;
        padding-bottom: 25px;
    }
        #mod_footer_bottom_col {
            width: 100%;
        }

下面是 HTML：

<div id="mod_footer"><footer>

    <div class="mod_footer_container">

        <div class="mod_footer_col">
        <p class="footer_title">Quick Links</p>
        <br />
            <div id="nav-bottom-left" class="nav"><nav>
                <p class="footer"><?php wp_nav_menu( array('theme_location' => 'footer-menu-one' )); /* editable within the Wordpress backend */ ?></p>
            </nav></div><!--#nav-bottom-left-->
        </div><!--mod_footer_col-->

        <div class="mod_footer_col">
        <p class="footer_title">In our Labs</p>
        <br />
            <div id="nav-bottom-right" class="nav"><nav>
                <p class="footer"><?php wp_nav_menu( array('theme_location' => 'footer-menu-two' )); /* editable within the Wordpress backend */ ?></p>
            </nav></div><!--#nav-bottom-right-->
        </div><!--mod_footer_col-->

        <div class="mod_footer_col">
        <p class="footer_title">Become a Partner</p>
        <br />
        <p class="footer">We're always looking for new partners to team up with in order to encourage and facilitate the use of geospatial data and components within mainstream IT systems. Want to join us? All you need to do is contact us and we can get the ball rolling...</p>
        <br />
        <p class="footer">Join our Partner Programme</p>
        </div><!--mod_footer_col-->

        <div id="mod_footer_col_end">
        <p class="footer">Interoperable data exchange via open standards - It's what we're all about.</p>
        <br />
        <p class="footer">Whether you want to load OS MasterMap, publish INSPIRE compliant data or know how to deliver AIXM via web services or any other GML data, we can help. Our software is enabling geographic information specialists around the world to easily load, publish, visualise and share geospatial data....</p>
        </div><!--mod_footer_col_end-->

    </div><!--mod_footer_container-->

    <div class="mod_footer_container_bottom">

    <div id="mod_footer_bottom_col">
        <p class="footer">&copy; <?php echo date("Y") ?> <a href="<?php bloginfo('url'); ?>/" title="<?php bloginfo('description'); ?>"><?php bloginfo('name'); ?></a>. <?php _e('All Rights Reserved.'); ?></p>
    </div><!--mod_footer_bottom_col-->

    </div><!--mod_footer_container_bottom-->

</footer></div><!--mod_footer-->

正如您通过访问链接所看到的，第 4 列以“通过开放标准进行的可互操作数据交换”开头

希望有人能帮忙！

谢谢！

4

3 回答 3

5

你的 cols 都是 25% 的宽度。所以其中 4 个应该占页脚宽度的 100%。

您出错的地方是向它们添加 25px 的填充。所以你基本上说 100% + 75px 这迫使你的最后一个 col 做它正在做的事情。

要么在你知道页脚宽度的情况下以像素为单位进行测量，然后从宽度中减去 25px 的填充，要么以百分比进行测量，但确保宽度 + 填充不 > 100%。

于 2012-10-24T12:28:38.640 回答
1

我同意 Spacebeer 的回答，这是该问题的另一种解决方案：

css3 box-sizing: http://css-tricks.com/box-sizing/

使用它作为

.mod_footer_col{box-sizing:border-box;}

将允许您保留填充。

注意：这在古代浏览器中不起作用。(即7)

于 2012-10-24T12:34:05.880 回答
0

padding-right:25px从您的列中删除，.mod_footer_col因为每个列都有宽度25%。当在列宽度中添加此25px填充时，它会将您的第 4列向下推。25%

您可以添加填充p.footer以保持列段落之间的间距。

于 2012-10-24T12:47:00.667 回答