3列頁腳左，中，右

正如你所看到的，我試圖創建一個頁腳，其中有3列，一個在左邊，一個在右邊，一個在中間，灰色背景，它應該看起來像像這樣：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:[email protected]">[email protected]</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/」

我在做什麼錯在這裏？

來源

2016-08-21 Malphai

Html的頁腳似乎沒關係。首先你應該把CSS鏈接放在標題中。其次 - 插入自舉鏈接（也在標頭中）：https://www.bootstrapcdn.com/。

來源

2016-08-21 10:49:31 lwozniak

你是對的，它們被正確放置。但是，如何讓圖像在圖像上看到灰色的框？ – Malphai

您沒有名爲footer（#footer）的id。在你的CSS中使用'footer'而不是'#footer'（刪除＃）。 – lwozniak

3列頁腳左，中，右

回答

相關問題