1

だから私はしばらくの間、この CSS について頭を悩ませてきました。誰かが新鮮な目でそれを見てくれる必要があります...ただし、最後の列は自動的に 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 番目の列は「オープン スタンダードによる相互運用可能なデータ交換」という言葉で始まります。

誰かが助けてくれることを願っています!

ありがとう！

4

3 に答える 3

5

あなたの列はすべて25％の幅です。したがって、そのうちの 4 つでフッターの幅の 100% を占める必要があります。

間違っているのは、25px のパディングを追加することです。したがって、本質的に 100% + 75px と言って、最後の列にそれが行っていることを強制しています。

フッターの幅がわかっているのでピクセル単位で測定し、幅から 25 ピクセルのパディングを差し引くか、すべてパーセンテージで行いますが、幅 + パディングが 100% を超えないようにしてください。

于 2012-10-24T12:28:38.640 に答える
1

Spacebeer の回答に同意します。問題の代替ソリューションを次に示します。

css3 ボックスサイジング: http://css-tricks.com/box-sizing/

これを

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

パディングを維持できます。

注: これは古いブラウザーでは機能しません。(ie7)

于 2012-10-24T12:34:05.880 に答える
0

Remove padding-right:25px from .mod_footer_col as your columns have width 25% each. And this 25px padding when added in 25% columns width it pushes your 4th column down.

You can add padding in p.footer to keep spacing between columns paragraphs.

于 2012-10-24T12:47:00.667 に答える