3 列页脚左、中、右答案

【问题标题】：3 columns footer left, middle and right3 列页脚左、中、右
【发布时间】：2016-08-21 10:31:49
【问题描述】：

如您所见，我正在尝试创建一个页脚，其中有 3 列，左侧一列，右侧一列，中间一列，灰色背景，它应该看起来像这样：

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Frontend</title>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="box">
                <div id="header">
                    <br />
                    <div id="searchMenu">
                        <input id="sweBtn" type="button" value="SVENSKA" />
                        <input id="engBtn" type="button" value="ENGLISH" />
                        <input id="searchTxt" type="text" />
                        <input id="searchBtn" type="button" value="SÖK" />
                    </div>
                    <br />
                </div>
                <div class="col-md-4 text-left" id="imgText">
                    <h3>VÄLKOMOMEN TILL<br />SUBLIME<br />CONSULTING!</h3>
                    <p>Alla Sveriges advokater är med i<br />Advokatsamfundet. Advokat-<br />samfundet upprätthålåler en hög<br />etisk och professionel standard<br /> hos Sveriges advokater, och ser till<br /> att advokaternas erfarenheter tas<br /> till vara i lagstifningen och den<br />övriga rättsutvecklingen.</p>
                </div>
                <div class="col-md-4">
                    <img id="imgHeader" src="~/img/Header.png" />
                </div>
                <div>
                    <ul id="navBar">
                        <li><a>BEHÖVER DU AVOKAT?</a></li>
                        <li><a>ADVOKATETIK</a></li>
                        <li><a>ATT BLI ADVOKAT</a></li>
                        <li><a>UTBILDNING</a></li>
                        <li><a>ADVOKATSSAMFUNDET TYCKER</a></li>
                    </ul>
                    <img id="rssImg" src="~/img/RSSIcon.png" />
                </div>
            </div>
        </div>
    </div>
    <footer>
        <div class="container">
            <div class="row">
                <div class="box">
                    <div class="row">
                        <div class="col-md-4">
                            <a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a>
                            <a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a>
                            <a href="/Design">Gå till Juridiska Bibliotekets webbplats-></a>
                        </div>

                        <div class="col-md-4">
                            <a href="/Design">Om cookies-></a>
                        </div>

                        <div class="col-md-4">
                            <p><strong>Sublime Consulting AB</strong></p>
                            <p>Telefon 08-459 96 00</p>
                            <a href="mailto:info@sublime.se">info@sublime.se</a>
                            <a>Mer kontaktuppgifter</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>

<link href="~/Content/custom.css" rel="stylesheet" />

CSS：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

    li a {
        display: block;
        color: #F3CAAA;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

        li a:hover {
            background-color: dimgrey;
        }

#header {
    background-color: #503F31;
    color: white;
    padding: 30px;
}

#searchMenu {
    margin-left: 1450px;
}

#sweBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    border:double;
    color: grey;
}

#engBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    border: double;
    color: #F3CAAA;
}

#searchTxt {
    background-color: grey;
    border-color: grey;
}

#searchBtn {
    font-family: 'Times New Roman';
    background-color: Transparent;
    color: #F3CAAA;
}

#imgText {
    font-size: 25px;
    position: absolute;
}

#imgHeader {
    width: 1904px;
}

#navBar {
    font-family: 'Times New Roman';
    background-color: #503F31;
    background-image: url(img/RSSIcon.png);
}

#rssImg{
    width: 30px;
    height: 30px;
    position:absolute;
    margin-left: 1800px;
    margin-top: -40px;
}

#footer {
    background-color: grey;
    color: white;
    padding-bottom: -250px;
}

这里是 jsfiddle 的链接：“https://jsfiddle.net/fd29rvyL/”

我在这里做错了什么？？

【问题讨论】：

标签： html css twitter-bootstrap multiple-columns

【解决方案1】：

页脚的 Html 似乎没问题。首先，您应该将 css 链接放在标题中。第二 - 插入引导链接（也在标题中）：https://www.bootstrapcdn.com/.

【讨论】：

你是对的，它们放置正确。但是我怎样才能让它周围有一个灰色的盒子，就像你在图片上看到的那样？
您没有名为 footer (#footer) 的 id。在 CSS 中使用“footer”而不是“#footer”（删除 #）。