#container div讓孩子伸展到全寬居中內容

enter image description here

我已經知道了定位，中心和東西。我在這裏，我想問你們的問題是：什麼是最佳做法有一個居中的div和其中的所有內容都居中，而單個人的背景色超過頁面的整個寬度始終保持中心？

這實際上是一種超常見的佈局，我只是不知道什麼是「思考」的正確方式。

我是否應該將佈局看作「我製作一個寬度爲1280px的大盒子，以margin：0 auto爲中心，然後爲該div的背景做一些特殊的事情 - 只有背景，內容應該保持原樣 - 超過或應該我做類似的東西，以同樣的方式，但重複我的代碼中心每個單一的元素？

所以基本上，應該都在一個盒子裏面，而且div只在背景中超過，或者它實際上更好地居中通過重複代碼單獨分開？

請記住，該網站是沒有響應，並且不需要適應/縮放和此外，淺灰色區域也是「身體」顏色，所以深灰色區域是頁面中唯一應該超出的特殊情況。

來源

2014-09-23 daghene

我在閱讀第一段時遇到了困難，但您想如何定位包含元素的方式取決於特定網站最方便的地方。我喜歡將「基本」類分配給最常見的1280px框，然後使用具有更多特定樣式的類進行分支。 – Taruckus 2014-09-23 14:46:02

感謝您的提示，我會嘗試認爲這樣的佈局:) – daghene 2014-09-24 08:59:34

我的建議：

我會給整個寬度支持三個基本容器。然後嵌入它的內容！

enter image description here

 html, body{ 
 
      padding: 0; 
 
      margin: 0; 
 
      border: 0; /*ie older versions*/ 
 
     } 
 
     header { 
 
      background-color: antiquewhite; 
 
     } 
 
     section{ 
 
      background-color: ActiveCaption; 
 
     } 
 
     footer{ 
 
      background-color: aquamarine; 
 
     } 
 
     .inner-wrapper{ 
 
      max-width: 300px; 
 
      margin: 0 auto; 
 
      border-left: 1px solid black; 
 
      border-right: 1px solid black; 
 
      height: 80px; 
 
      text-align: center; 
 
     } 
 

 
     section .inner-wrapper{ 
 
      height: 200px; 
 
     }

  <header> 
 
      <div class="inner-wrapper"> 
 
       <div>some content</div> 
 
      </div> 
 
     </header> 
 
     <section> 
 
      <div class="inner-wrapper"> 
 
       <div>some content</div> 
 
      </div> 
 
     </section> 
 
     <footer> 
 
      <div class="inner-wrapper"> 
 
       <div>some content</div> 
 
      </div> 
 
     </footer>

這是一個絕對基本的，但強大的佈局的，我用了好幾遍。使用媒體查詢或使用百分比設置進行響應非常容易！

來源

2014-09-23 15:10:36

我試過了，它的工作原理，這真的是最簡單的思考方式！謝謝你的回答！ :) – daghene 2014-09-24 09:03:08

不客氣，對你來說這是正確的答案@daghene？ – 2014-09-24 09:54:16

是的，標記！再次感謝：） – daghene 2014-09-24 10:38:29

在我看來，你應該給身體或容器股background顏色屬性，該div是全寬和高度，然後中間的div，你應該給一個margin:0 auto;和一個特定的寬度，這是我會做的，但這取決於你想要做什麼，你最常用的方式是什麼，以便你知道下一次如何做到這一點，更快。

來源

2014-09-23 14:47:55

是的，這似乎是我需要的。我正在努力想知道是否有比我使用的更好的方法，這似乎是「更輕」的......謝謝！ – daghene 2014-09-24 09:04:04

確保接受答案是最合適的。 – 2014-09-24 09:07:03

#container div讓孩子伸展到全寬居中內容

回答

相關問題