CSS 列未对齐

Question

所以我一直在为这个 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 列以“通过开放标准进行的可互操作数据交换”字样开头

希望有人能提供帮助！

谢谢！

Answer 1

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

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

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

Answer 2

我同意 Spacebeer 的回答，这里有一个替代解决方案：

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

把它当作

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

将允许您保留填充。

注意：这在古老的浏览器中不起作用。 (ie7)

Answer 3

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

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