CSS列没有对齐

Question

所以我已经在这个CSS上绞尽脑汁了一段时间,需要有人用一双新鲜的眼睛来看它...基本上发生的事情是我在页脚中有4根相邻的列,但最后一列自动在第3列下移动.我看不出发生了什么让它做到了这一点？!

看看下面的链接:

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

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

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

如果您知道页脚的宽度,则以像素为单位进行测量,并从宽度中减去25px填充,或者以百分比的形式减去所有内容,但要确保宽度+填充不超过100%.