HTML

Question

我正在设计一个网站，我正在尝试做关于页脚的部分。到目前为止，我没有遇到任何麻烦，直到我决定做页脚布局。

准确地说：我想将页脚分成三个单独的列，如下图所示：

design

然而结果是：

outcome

正如您所看到的，页脚列不会保持其宽度，只是延伸到内容。对于不同的设置，其他事情发生了，但它从来没有出现在我身上。

我目前的非工作方法：

HTML

<html>

<!-- BEGIN HEAD -->
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />

    <!-- Start WOWSlider.com HEAD section -->
    <link rel="stylesheet" type="text/css" href="engine0/style.css" />
    <script type="text/javascript" src="engine0/jquery.js"></script>
    <!-- End WOWSlider.com HEAD section -->

</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body>

    <!-- BEGIN WRAPPER FOR FOOTER PUSHING -->
    <div class="wrapper">

    <!-- BEGIN .PAGE -->
    <div class="page">

        <!-- BEGIN .LOGO -->
        <div class="logo"> 

            <img class="logoBB" src="images/logo.png">
            <br><text class="logosub">Tworzymy Dla Ciebie</text></br>

        </div>
        <!-- END .LOGO -->

        <!-- BEGIN .MENU -->
        <div class="menu">

            <hr class="top_line">

                <ul>
                <li><a href="#">O NAS</a></li>
                <li><a href="#">GALERIA PRODUKTÓW</a></li>
                <li><a href="#">AKTUALNOŚCI</a></li>
                <li><a href="#">ZADAJ PYTANIE</a></li>
                <li><a href="#">KONTAKT</a></li>
                </ul>

            <hr class="bottom_line">


        </div>
        <!-- END .MENU -->          

        <!-- Start WOWSlider.com BODY section --> <!-- add to the <body> of your page -->
        <div id="wowslider-container0">
        <div class="ws_images"><ul>
            <li><img src="data0/images/slide1.png" alt="http://wowslider.net/" title="WOOD" id="wows0_0"/></li>
            <li><img src="data0/images/3025992posterpdesignwork.jpg" alt="CUBES" title="CUBES" id="wows0_1"/></li>
        </ul></div>
        <div class="ws_bullets"><div>
            <a href="#" title="WOOD"><span><img src="data0/tooltips/slide1.png" alt="WOOD"/>1</span></a>
            <a href="#" title="CUBES"><span><img src="data0/tooltips/3025992posterpdesignwork.jpg" alt="CUBES"/>2</span></a>
        </div></div><div class="ws_script" style="position:absolute;left:-99%"><a href="http://wowslider.com">wowslider.com</a> by WOWSlider.com v8.6</div>
        <div class="ws_shadow"></div>
        </div>  
        <script type="text/javascript" src="engine0/wowslider.js"></script>
        <script type="text/javascript" src="engine0/script.js"></script>
        <!-- End WOWSlider.com BODY section --> 

        </div>
        <!-- END .PAGE -->

        <!-- FOOTER PUSHER -->
        <div class="push"></div>

    </div>
    <!-- END .WRAPPER -->

    <!-- BEGIN FOOTER -->
    <div class="footer">

        <!-- BEGIN FOOTER CONTAINER -->
        <div class="footer_container">

            <!-- BEGIN .FINDUS -->
            <div class="findus">

            </div>
            <!-- END .FINDUS -->

            <!-- BEGIN .DESIGNERS -->
            <div class="designers">

            </div>
            <!-- END .DESIGNERS -->

            <!-- BEGIN .INSPIRATIONS -->
            <div class="inspirations">

            </div>
             <!-- END .INSPIRATIONS -->

        </div>
        <!-- END FOOTER CONTAINER -->       

    </div>
    <!-- END FOOTER -->

</body>
<!-- END BODY -->

CSS

/* GENERAL PAGE SETTINGS */
* {
    margin: 0;
    padding: 0;
}

.page {
    margin: 25px auto;
    width: 960px;
}

/* WRAPPER & HTML SETTINGS */
html, body {
    height: 100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -168px; 
}
.footer, .push {
    height: 168px; /* .push must be the same height as .footer */
}

/* FOOTER SETTINGS */
.footer {
    clear: both;
    width: 100%;
    background-color: #323232;
}

.footer_container {
    width: 960px;
    margin: 0 auto;
    background-color: red;
}

.footer .findus {
    float: left;
    width: 33,33333%;
}

.footer .designers {
    float: left;
    width: 33,33333%;
    background-color: red;
}


.footer .inspirations {
    float: left;
    width: 33,33333%;
}


/* LOGO SETTINGS */

img.logoBB {
    margin: 0 28.95833333333333%;

}

.logosub {
    font-family: Federant;
    font-size: 17.83px;
    color: #94979b;
    padding: 0 40.625%;
}

/* MENU SETTINGS */
.menu {
    margin: 0 90px;
}


.menu ul {
    text-align: center;
    list-style-type: none;
    margin: 17px auto;
}

.menu li {
    display: inline-block;
}

.menu a {
    color: black;
    text-decoration: none;
    font-family: slabo;
    font-size: 18px;    
}

.menu .top_line {
    width: 780px;
    margin: 32px 0 0;
    height: 2px;
    color: black;
    background-color: black;
}

.menu .bottom_line {
    width: 780px;
    margin: 0 0 40px;
    height: 3px;
    color: black;
    background-color: black;
}

我尝试过的（没有用过）：

将表格应用于页脚
使用包含％值和像素值的左，右和中心浮点（按此顺序）
在页脚中尝试了所有内容的固定值（这有效）但我的目标是让这个网站响应，所以这不是任何方式。

如果你碰巧发现我所犯的任何其他错误，我会很高兴指出它们。

Answer 1

您的页脚列需要position: relative才能成为列。此外，您的宽度百分比中有逗号，需要为小数。因此，每个页脚css将如下（当然，正确的类名称 - 我只是抓住一个作为示例）：

.footer .inspirations {
    float: left;
    width: 33.33333%;
    position: relative;
}

See Codepen

Answer 2

.findus, .designers, .inspirations{
   display:inline-block;
   position:relative;
   width:calc(100% / 3);
}

此外，您的三个页脚div位于.footer_contatiner div中，该div设置了最大宽度。如果您希望它延伸100％的页面宽度，请将它们放在包装器外面。

Answer 3

尝试使用内联/内联块。您只需更改容器和每列中的几行：

.footer_container {
    width: 960px;
    margin: 0 auto;
    background-color: red;
    display: inline;
}

.footer .findus {
    display: inline-block;
    width: 33,33333%;
}

.footer .designers {
    display: inline-block;
    width: 33,33333%;
    background-color: red;
}


.footer .inspirations {
    display: inline-block;
    width: 33,33333%;
}

HTML / CSS页脚划分为列

HTML

CSS

我尝试过的（没有用过）：

3 个答案: