HTML和CSS DIV佈局

我試圖做一個網站，一些div持有的圖像/文本，佈局看起來是這樣的：HTML和CSS DIV佈局

（我不能發佈超過2個鏈接，因此文字的例子。的div居中）

- 
- - 
- - 
- -

當我使瀏覽器小的div應根據相互排隊，這樣的：

但我的代碼將是這樣的：

我已經試過各種事情，但他們沒有導致第一個div被在這兩種情況下完美的神韻：。

HTML源代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title>Sinterklaas website</title> 
</head> 
<body style="background-color:black"> 
    <center><div class = "secondary"></div></center> 
    <center> 
     <div class="main"> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
       <tr> 
        <td colspan="2" height="180px"> 
         <a href="http://www.google.nl"> 
          <img style="display:block;" width="100%" height="100%" src="arduino.jpg" /> 
         </a> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="1" bgcolor="blue" width="220px"></td> 
        <td bgcolor="green"></td> 
       </tr> 
      </table> 
     </div> 
     <div class="main" id="second"> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
       <tr> 
        <td colspan="2" height="180px"> 
         <a href="http://www.google.nl"> 
          <img style="display:block;" width="100%" height="100%" src="arduino.jpg" /> 
         </a> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="1" bgcolor="blue" width="220px"></td> 
        <td bgcolor="green"></td> 
       </tr> 
      </table> 
     </div> 
    </center> 
    <center> 
     <div class="main"></div> 
     <div class="main"></div> 
    </center> 
    <center> 
     <div class="main"></div> 
     <div class="main"></div> 
    </center> 
    </body>

CSS來源：

body { 
    background-image: url("background.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: center; 
} 



.main { 
    background-color: red; 
    display: inline-block; 
    position: relative; 
    width: 300px; 
    height: 225px; 
    margin: 15px; 
} 

.secondary { 
    background-color: red; 
    position: relative; 
    display: inline-block; 
    left: -165px; 
    width: 300px; 
    height: 70px; 
    margin: 0 auto; 
} 

.test { 
    background-color: red; 
    display: inline-block; 
    position: relative; 
    width: 300px; 
    height: 260px; 
    margin: 30px; 
} 

.empty { 
    position: relative; 
    display: inline-block; 
    background-color: red; 
    width: 300px; 
    height: 0px; 
} 

#first { 
} 

#second { 
    background-image: url("arduino.jpg"); 
    background-size: 100% 100%; 
} 

#third { 

} 

#fourth { 

} 

#fifth { 

} 

#sixth { 

}

任何幫助將真正理解！

來源

2015-10-13 FrankK

'已棄用，您不應該再使用它了。 [MDN]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center） – cocoa

[在div中水平居中div的可能副本]（http://stackoverflow.com/ question/114543/horizontal-center-a-div-in-a-div） – TylerH

您的@media查詢在哪裏？ –

我清理了一下你的html代碼，拿出你的表格，這樣就更容易看到結構。

這是你想要的嗎？

html, body { 
 
    margin: 0; 
 
} 
 

 
body { 
 
    background-color:black; 
 
    background-image: url("background.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
} 
 

 
.wrapper { 
 
    margin: 0 auto; 
 
    min-width: 335px; 
 
    max-width: 670px; 
 
    text-align: center; 
 
} 
 

 
.main { 
 
    background-color: red; 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 300px; 
 
    height: 225px; 
 
    margin: 15px; 
 
} 
 

 
.top { 
 
    height: 70px; 
 
} 
 

 
@media (min-width: 680px) { 
 
    .left { 
 
    text-align: left; 
 
    } 
 
}

<div class="wrapper left"> 
 
    <div class="main top"></div> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <div class="main"></div> 
 
    <div class="main" id="second"></div> 
 
    <div class="main"></div> 
 
    <div class="main"></div> 
 
    <div class="main"></div> 
 
</div>

來源

2015-10-13 16:32:19 LGSon

如果頁面處於全屏模式，則會將第一個div居中，第一個div必須位於全屏模式下的第二個div之上，如下所示：http://puu.sh/kIQKD/bf200d1515.png全部放置當頁面變小時的元素是正確的。 – FrankK

是的，我們需要知道它應該在哪個寬度上有2列，並且它們是從上到下包裹的。您提供的代碼段佈局中唯一的變化是，如果頁面足夠大以顯示兩個圓柱，則最上面的div必須位於第一個圓柱上方。如果頁面只能顯示1個collum，它應該將每個div放在一起。如果您查看其他答案並運行該代碼，那麼當您可以在瀏覽器中安裝一個瀏覽器時，頁面的外觀應該是這樣的 – FrankK

@ user3499284更新了我的答案。 – LGSon

要回答你的定位難題，從secondary刪除left屬性。

但這只是一個簡單的解決方法，您有一些元素佈局決策對您不利。我在這裏爲您寫了一個修復程序，我認爲這將有助於簡化發生的事情：

增加了一個center-horizontally類來包裝所有內容。
使CSS代碼相關且可讀。
刪除CSS中的冗餘代碼。

編輯按OP的請求（評論閱讀）：

更改HTML包括一個div環繞.secondary格，現在該功能作爲一整排。
更改了.center-horizontally CSS以適應全寬和小屏幕尺寸。
一個有用的link to learn about layout使用CSS，非常有趣和相關。你也可以模仿你的代碼的地方，如codepen，jsfiddle，越來越多的

body { 
 
    background-image: url("background.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    background-position: center; 
 
    background-color: black; 
 
} 
 
.empty, .main, .secondary { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 300px;  
 
    margin: 0 auto; 
 
} 
 
.main { 
 
    background-color: red; 
 
    height: 225px; 
 
    margin: 15px; 
 
} 
 
.main > table { 
 
    border: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.secondary { 
 
    background-color: pink; 
 
    height: 70px; 
 
} 
 
.test { 
 
    height: 260px; 
 
    margin: 30px; 
 
} 
 
.empty { 
 
    height: 0px; 
 
} 
 
#second { 
 
    background-image: url("arduino.jpg"); 
 
    background-size: 100% 100%; 
 
} 
 
.center-horizontally { 
 
    min-width: 330px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.center-horizontally .row{ 
 
    width: 100%; 
 
}

<div class="center-horizontally"> 
 
     <div class="row"> 
 
      <div class="secondary"></div> 
 
     </div> 
 
     <div class="main"> 
 
      <table cellpadding="0" cellspacing="0"> 
 
       <tr> 
 
        <td colspan="2" height="180px"> 
 
         <a href="http://www.google.nl"> 
 
          <img style="display:block;" width="100%" height="100%" src="arduino.jpg" /> 
 
         </a> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="1" bgcolor="blue" width="220px"></td> 
 
        <td bgcolor="green"></td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
     <div class="main" id="second"> 
 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
 
       <tr> 
 
        <td colspan="2" height="180px"> 
 
         <a href="http://www.google.nl"> 
 
          <img style="display:block;" width="100%" height="100%" src="arduino.jpg" /> 
 
         </a> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td colspan="1" bgcolor="blue" width="220px"></td> 
 
        <td bgcolor="green"></td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
     <div class="main"></div> 
 
     <div class="main"></div> 
 
     <div class="main"></div> 
 
     <div class="main"></div> 
 
    </div>

讓我知道如果你需要任何進一步的解釋。

來源

2015-10-13 16:32:24 AGE

這將所有div放在eachother之下，它應該只在頁面太小而不能像這樣顯示時纔會執行：http://puu.sh/kIQKD/bf200d1515.png – FrankK

我看到，wrapper div本身的好處是你可以根據自己的需要修改它，比如擴展到適合你的女主角或者讓她們成爲中心，認爲你可以基於這個工作？ – AGE

我對html和css不是很有經驗，有沒有哪些網站可以幫助我理解這個概念？ – FrankK

HTML和CSS DIV佈局

回答

相關問題