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％。

Answer 2

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

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

将其用作

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

可以让你保持填充。

注意：这在古代浏览器中不起作用。（IE7）

Answer 3

从padding-right:25px移除.mod_footer_col，因为您的列的宽度分别为25%。在25px列宽度中添加此25%填充时，它会将您的4 ^th列向下推。

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

CSS列没有对齐

3 个答案: