在css和html中製作盒子並將它們放在網格中

我想做一個排序的起始頁面，我希望它看起來有點像這樣：https://imgur.com/zjzKyRD（做得很差，但我用的程序非常糟糕（我想念mspaint））在css和html中製作盒子並將它們放在網格中

我最初使用的按鈕，這使得它很容易鏈接和自定義，但我有一些問題的大小，所以我嘗試使用div，但我似乎無法使整個div框一個可點擊的鏈接。如果我能夠弄清楚，我仍然需要將這些盒子放在特定的地方，我不知道如何。

問題：我該如何製作這些盒子，將它們放置在網格中，並將它們鏈接到不同的網站？也可以做一個功能，讓我可以懸停在其中一個「網站」上，它會告訴我一些關於它的信息？（手動輸入）

請記住我對此很新，所以解釋會很好：P謝謝。

編輯：不包括任何代碼，那就是：

CSS（從W3 「借」）

.button { 
margin-left: 150px; 
margin-top: 50px; 
background-color: #4CAF50; 
border: none; 
color: white; 
padding: 16px 32px; 
text-align: center; 
text-decoration: none; 
display: inline-block; 
font-size: 16px; 
margin: 4px 2px; 
-webkit-transition-duration: 0.4s; 
transition-duration: 0.4s; 
cursor: pointer;} 

.button1 { 
background-color: #ffbf80; 
color: black; 
border: 2px solid #ffbf80; 
min-width: 350px; 
width: 350px;} 

.button1:hover { 
background-color: white; 
color: #ffbf80;}

HTML：

<a href="https://www.google.com" target="blank" class="button button1">Google</a>

那只是的一個按鈕，但其他人基本相同，但具有不同的鏈接，邊距和顏色（顏色？）。當使用多個盒子時，它們會出現在彼此之下，而不是彼此相鄰。我已經搞亂了一堆不同的保證金設置，在瀏覽時我在網上找到了一些東西，但沒有任何東西似乎正確地對齊它們。

來源

2017-09-05 Kossi

哪裏是你的代碼？ –

歡迎來到Stack Overflow！預計你至少試圖爲自己編碼。堆棧溢出不是代碼寫入服務。我建議你做一些[**額外的研究**]（http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users），無論是通過谷歌或通過搜索，嘗試和。如果您仍然遇到麻煩，請返回**您的代碼**並解釋您所嘗試的內容。 –

好的，對不起。我包括一些代碼，但是我沒有真正明白這一點，因爲它不起作用：P現在編輯q，感謝以愉快的方式讓我知道^^ – Kossi

首先我建議你使用一些網格框架，比如Bootstrap或Foundation。沒有人用純HTML編寫網站了。其次，我認爲你可以使用a-tag並改變css，使它成爲內聯框。特別是如果你只是將它們用作鏈接而不是做任何幻想（比如一些動態動畫）。你應該有一個容器類來代表一行。具體如下：

<div class="container"> 
    <a class="linkbox" href="link1"> Link 1 </a> 
    <a class="linkbox" href="link2"> Link 2 </a> 
    <a class="linkbox" href="link3"> Link 3 </a> 
</div> 
<div class="container"> 
    <a class="linkbox" href="link4"> Link 4 </a> 
    <a class="linkbox" href="link5"> Link 5 </a> 
    <a class="linkbox" href="link6"> Link 6 </a> 
</div>

看看這個撥弄伴隨CSS https://jsfiddle.net/wwk4tyzw/2/

來源

2017-09-05 11:04:55 ShamPooSham

不允許對此問題發表評論我會把它放在這裏。我在jsfiddle @Kossi上試過你的代碼，並且這些框似乎彼此堆疊在一起。你使用什麼瀏覽器？ https://jsfiddle.net/p61cmf9k/ – ShamPooSham

即時通訊使用safari :(但我已經測試了ShamPooSham的代碼，並編輯了一點，它似乎工作正常:)現在的問題是，它不居中。我曾嘗試添加

，但當我沒有全屏顯示時，它似乎沒有正確居中。另外，我怎樣才能減少他們之間的開放空間的大小？當我調整窗口大小時，這些盒子會在彼此靠近之前以其他方式進行。這裏是「更新」的小提琴：https：//jsfiddle.net/kossi/bzw64ug9/ – Kossi

好吧，你能否給我一些其他的選擇來中心框？ – Kossi