如何使網格響應？

我創建了一個網站，我無法使平鋪佈局響應。我是一個初學者，我不知道如何讓我的網站響應。任何幫助將不勝感激。下面給出了CSS和HTML。加上背景重複3次，而我沒有在CSS中添加重複屬性。如何使網格響應？

HTML

<div class="grid"> 
    <div class="tile hvr-reveal " id="tile1"> 
    <div style="text-align: center;"> 
     <div class="img-with-text "> 
     <p> 
      <strong> 
      <a href="Contact.html" style="text-decoration:none">Contact Us </a> 
      </strong> 
      <img src="homepage images/file242.png" alt="sometext" width="64" height="64" id="img0"/> 
     </p> 
     </div> 
    </div> 
    </div> 

    <div class="tile hvr-reveal" id="tile2"> 
    <div style="text-align: center;"> 
     <div class="img-with-text"> 
     <p> 
      <strong> 
      <a href="products.html" style="text-decoration:none">Products</a> 
      </strong> 
      <img src="homepage images/shopping145.png" alt="sometext" width="64" height="64" id="img"/> 
     </p> 
     </div> 
    </div> 
    </div> 

    <div class="tile hvr-reveal " id="tile3"> 
    <div style="text-align: center;"> 
     <div class="img-with-text"> 
     <p> 
      <strong> 
      <a href="partners.html" style="text-decoration:none">Partners</a> 
      </strong> 
      <img src="homepage images/celebration19.png" alt="sometext" width="64" height="64" id="img2"/> 
     </p> 
     </div> 
    </div> 
    </div> 

    <div class="tile hvr-reveal" id="tile4"> 
    <div style="text-align: center;"> 
     <div class="img-with-text"> 
     <p> 
      <strong> 
      <a href="ABOUTUS.HTML" style="text-decoration:none">About Us</a> 
      </strong> 
      <img src="homepage images/men16.png" alt="sometext" width="64" height="64" id="img1"/> 
     </p> 
     </div> 
    </div> 
    </div> 
</div>

CSS

body { 
    font-family: chewy; 
    color: #ffffff; 
    background-image: url(pictures%20for%20web/bg3.jpg) ; 
    background-position: center center; 
    background-attachment: fixed; 
    background-size: cover; 

    **strong text**background-repeat: no-repeat; 

    webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
} 

.grid { 
    width: 1140px; 
    height: 650px; 
    margin: auto; 
} 


.tile { 
    position: absolute; 
    width: 200px; 
    left: 451px; 
    top: 152px; 
    height: 152px; 
    box-sizing: border-box; 
} 

#tile1 { 
    top: 407px; 
    left: 754px; 
    width: 338px; 
    height: 196px; 
    margin-left: 2px; 
    margin-right: 2px; 
    background-color: #ff3300; 
} 

#tile2 { 
    margin-left: 2px; 
    margin-right: 2px; 
    top: 100px; 
    left: 980px; 
    width: 148px; 
    height: 154px; 
    background-color: #008000; 
} 

#tile3 { 
    top: 255px; 
    left: 523px; 
    width: 200px; 
    height: 150px; 
    background-color: #660066 ; 
    margin-left: 2px; 
    margin-right: 2px;  
} 

#tile4 { 
    top: 255px; 
    left: 118px; 
    width: 200px; 
    height: 150px; 
    background-color: #990000; 
    margin-left: 2px; 
    margin-right: 2px; 
}

來源

2016-02-19 Areeba Syed

你會發現很多很多的文章解釋如何設計工作的響應。只要搜索它們，當你遇到一些問題時，我們會很樂意幫助:) –

如果你是初學者，那麼在已經構建網格系統的地方使用Bootstrap。 http://getbootstrap.com/css/#grid – DivineChef

有些東西可以幫助你 - 使用百分比而不是px來表示寬度。通過這種方式，您在調整客戶端大小時可以適當縮放。另外，你應該儘量避免'position：absolute;'。這會擾亂你的圖塊如何相互響應。就像上面的評論一樣，響應式設計教程很容易找到，並且可以讓您開始右腳 – Maverick976

我猜你想是這樣的：

<div class="container"> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
    <div class="box"></div> 
</div> 

.container { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 90%; 
    height: auto; 
    margin-left: 5%; 
    background-color: #444; 
    display: block; 
    text-align: center; 
} 

.box { 
    border: solid 1px #000; 
    height: 200px; 
    width: 200px; 
    display: inline-block; 
    margin: 25px auto; 
} 

.box:nth-of-type(1){ 
    background: yellow; 
} 
.box:nth-of-type(2){ 
    background: red; 
} 
.box:nth-of-type(3){ 
    background: blue; 
} 
.box:nth-of-type(4){ 
    background: green; 
}

這將保持框對齊，並根據瀏覽器的寬度會改變它們。

http://codepen.io/DB1500/pen/JGqaBZ

來源

2016-02-19 18:14:13 DB1500

如何使網格響應？

回答

相關問題