@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600|Lato|Montserrat&subset=greek);
body
{
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.desc
{
margin-top: 40px;
text-align: center;
font-size: 100px;
color: darkred;
}
.cool
{
display: inline-block;
width: 100%;
}
.topbar
{
position: fixed;
top: 0px;
width: 100%;
right: 0px;
background-color: tomato;
text-align: right;
height: 50px;
z-index: 100;
}
.texti
{
margin-right: 15px;
}
.linkur
{
border: 1px solid black;
padding: 8.5px;
margin-right: 10px;
text-decoration: none;
border-color: transparent;
font-size: 1.3em;
color: darkred;
}
.linkur:hover
{
background-color: lightblue;
opacity: 0.7;
}
label
{
position: fixed;
top: -2000px;
}
.mynd
{
position: fixed;
top: -50px;
left:20px;
}
.navigation
{
height: 96%;
width: 20%;
background-color: tomato;
}
.logo
{
position: fixed;
top: -100px;
}
.hlid
{
position: fixed;
left: -2000px;
width: 700px;
height: 90%;
z-index: 100;
margin-right: 20px;
}
.main
{
position: relative;
left: 3%;
width: 30%;
text-align: center;
height: 30%;
display:inline-block;
margin-right:10px;
margin-left:10px;
margin-bottom:10px;
}
/*
.main2
{
position: relative;
right: -3%;
width: 30%;
text-align: center;
display:inline-block;
margin-right:10px;
margin-left:10px;
margin-bottom:10px;
}
*/
.leikur2
{
float: right;
}
.leikjatexti
{
border: 1px solid black;
border-radius: 20px;
text-decoration: none;
margin-bottom: 10px;
padding-top: 5px;
margin-top: 10px;
background-color: tomato;
height: auto;
}
.text2
{
text-decoration: none;
color: darkred;
}
@media screen and (max-width: 48em){
.mynd2
{
height: 150px;
width: 70px;
margin-top: 10px;
}
.desc
{
font-size: 45px;
}
.topbar
{
text-align: left;
}
.linkur
{
position: fixed;
top: -100px;
}
input {
display: none;
}
label,
label {
position: fixed;
top: -27px;
left: 5px;
cursor: pointer;
display: inline-block;
font-size: 18px;
transition: all .15s ease;
font-size: 30px;
z-index: 100;
}
label:hover {
color: darkred;
}
input:checked ~ .hlid {
position: fixed;
left: -50px;
height: 18%;
top: 30px;
transition: all .15s ease;
}
li
{
list-style-type: none;
}
.hlidlinkur
{
margin-bottom: 20px;
margin-left: 10px;
}
.hlidlinkura
{
border: 1px solid black;
padding: 7px;
text-align: center;
border-color: transparent;
text-decoration: none;
color: darkred;
font-size: 1.1em;
}
.hlidlinkura:hover
{
background-color: lightblue;
}
}<!DOCTYPE html>
<html>
<head>
<script language="JavaScript">
var randnum = Math.random();
var inum = 3;
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "img/shi.jpg"
images[2] = "img/halo.jpg"
images[3] = "img/franklin.jpg"
var image = images[rand1]
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Main site</title>
<link rel="stylesheet" href="Gru_games.css" type="text/css" />
</head>
<body>
<script language="JavaScript">
document.write('<body background="' + image + '" text="white">')
</script>
<nav class="topbar">
<a href="Gru_main.html"><img class="mynd" src="project.png"></a>
<ul class="texti">
<a href="" class="linkur">Games</a>
<a href="" class="linkur">Profile</a>
<a href="" class="linkur">My Cart</a>
</ul>
</nav>
<input type="checkbox" id="toggle">
<label for="toggle"><p>☰</p></label>
<nav class="hlid">
<ul class="navigation">
<li class="hlidlinkur"><a class="hlidlinkura" href="#">Games</a><li>
<li class="hlidlinkur"><a class="hlidlinkura" href="#">Profile</a></li>
<li class="hlidlinkur"><a class="hlidlinkura" href="#">My cart</a></li>
</ul>
</nav>
<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>
<h1 class="desc">Games</h1>
<div class="cool">
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="walking.jpg" alt="Walking Dead" height="152" width="120">
<h1>The Walking Dead</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="portal2.jpg" alt="portal" height="152" width="120">
<h1>Portal 2</h1>
<p>
Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="blackops.png" alt="Black ops" height="152" width="120">
<h1>COD: Black Ops III</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="borderlands.jpg" alt="portal" height="152" width="120">
<h1>Borderlands</h1>
<p>
Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="gta.jpg" alt="GTA V" height="152" width="120">
<h1>Grand Theft Auto V</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="tombraider.jpg" alt="TR" height="152" width="120">
<h1>Tombraider 2014</h1>
<p>
Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="destiny.jpg" alt="Destiny" height="152" width="120">
<h1>Destiny</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="rambo.jpg" alt="Rambo" height="152" width="120">
<h1>Rambo: The Video Game</h1>
<p>
Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="nba2k.jpg" alt="NBA" height="152" width="120">
<h1>NBA 2K16</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="ratchet.jpg" alt="R&C" height="152" width="120">
<h1>Ratchet&Clank: A crack in time </h1>
<p>
Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="bloodborne.jpg" alt="Bloodborne" height="152" width="120">
<h1>Bloodborne</h1>
<p>
viðmiðið í þessum leik er að lifa af og velja réttu leiðirnar til þess, í leiknum reynir mikið á leikmanninn
til að velja rétt og fá rétta endann.
</p>
</div>
</a>
</div>
<div class="main">
<a class="text2" href="Gru_login.html">
<div class="leikjatexti">
<img class="mynd2" src="evolve.jpg" alt="evolve" height="152" width="120">
<h1>Evolve</h1>
<p>
Portal 2 er leikur sem kom út árið 2010, leikurinn hefur hlotið gríðarlega góða dóma um heim allann,
í leiknum þarftu að kljást við fjölda þrauta með byssu sem getur skotið hliðum inní aðrar víddir.
</p>
</div>
</a>
</div>
</div>
</body>
强调文字
我似乎无法让盒子（柱子）达到相同的高度，我已经尝试过将它们放在一起，我真的没有更多的想法了。任何反馈都会非常受欢迎，Ps：一些冰岛语可能在代码中
答案 0 :(得分：0)
如果设置.leikjatexti类的高度，则框将具有相同的高度;
你必须对齐盒子，因为中间的盒子略高于其他盒子，但它们的高度相等
答案 1 :(得分：0)
以下示例可能对您有所帮助。他们使用CSS3中使用的display:flexbox。这是一个small guide on flexbox。
片段创建了flexbox容器。 justify-content: flex-start;和justify-content: space-around之间的差异;
虽然第一个可能具有向左倾斜的对齐，但是在列数量不能被3整除的地方（例如，有5行），它不会克服奇怪的输出。
.flex-container{
background-color: blue;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: stretch;
}
.flex-item{
background-color: white;
flex-basis: 30%;
margin: 10px;
align-self: stretch;
box-sizing: border-box;
height: 400px;
}<div class="flex-container">
<p class="flex-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla orci sed dui faucibus, vel tempus urna maximus. Phasellus fermentum orci mi, nec ultrices libero blandit sed. Mauris congue sem lacus, id porta velit faucibus quis. Nulla turpis odio,
fringilla vitae luctus sed, auctor ut nisl. Curabitur pharetra scelerisque interdum. Vivamus sit amet eros consectetur, feugiat urna sit amet, hendrerit libero. Aliquam rutrum finibus ipsum at efficitur. Donec dolor elit, suscipit consectetur dui
sed, tristique mattis magna. Mauris porttitor at justo sit amet sodales. Cras ut tellus risus.
</p>
<p class="flex-item">
Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce luctus, nibh eu sodales laoreet, ante nisi faucibus odio, eu pharetra ante urna ut purus. Fusce rutrum orci accumsan arcu porta aliquam. Donec est velit, consectetur venenatis efficitur
</p>
<p class="flex-item">
quis, pharetra aliquam urna. Suspendisse in tincidunt felis. Phasellus nec elit sit amet sem viverra ullamcorper ut sed nunc. Nulla gravida rutrum porttitor. Proin nulla sapien, ullamcorper nec placerat quis, eleifend ut dolor. Proin tempor quis felis
</p>
<p class="flex-item">
quam sodales sit amet. Duis interdum augue quis scelerisque congue. Duis et imperdiet lorem. Quisque tincidunt, ex a gravida congue, mauris eros sollicitudin metus, a porta massa quam et nisi. Curabitur orci erat, pellentesque eu dui ac, rhoncus lobortis
</p>
<p class="flex-item">
ante. Nullam suscipit in risus quis iaculis. Cras sed quam leo. Aliquam aliquam dolor vel tellus ultrices pharetra. Donec laoreet ornare sapien non eleifend. Phasellus nec dui dui. Pellentesque auctor luctus nisl. Cras elit tellus, posuere eget nisl vitae,
semper ultrices dui. Cras porta orci tortor. Integer tristique enim quis convallis aliquet. Integer eu neque tellus. Pellentesque ut quam tincidunt, iaculis mi sed, aliquam dui. Sed vulputate dolor sed ante posuere tempor. In quis dapibus eros. In
hac
</p>
</div>
在第二个中你有很好的对齐方式，但你必须确保你有一个可以被3整除的列数（3,6,9,12 ......等）
.flex-container{
background-color: blue;
display: flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: stretch;
}
.flex-item{
background-color: white;
flex-basis: 30%;
align-self: stretch;
box-sizing: border-box;
height: 400px;
}<div class="flex-container">
<p class="flex-item">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla orci sed dui faucibus, vel tempus urna maximus. Phasellus fermentum orci mi, nec ultrices libero blandit sed. Mauris congue sem lacus, id porta velit faucibus quis. Nulla turpis odio,
fringilla vitae luctus sed, auctor ut nisl. Curabitur pharetra scelerisque interdum. Vivamus sit amet eros consectetur, feugiat urna sit amet, hendrerit libero. Aliquam rutrum finibus ipsum at efficitur. Donec dolor elit, suscipit consectetur dui
sed, tristique mattis magna. Mauris porttitor at justo sit amet sodales. Cras ut tellus risus.
</p>
<p class="flex-item">
Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce luctus, nibh eu sodales laoreet, ante nisi faucibus odio, eu pharetra ante urna ut purus. Fusce rutrum orci accumsan arcu porta aliquam. Donec est velit, consectetur venenatis efficitur
</p>
<p class="flex-item">
quis, pharetra aliquam urna. Suspendisse in tincidunt felis. Phasellus nec elit sit amet sem viverra ullamcorper ut sed nunc. Nulla gravida rutrum porttitor. Proin nulla sapien, ullamcorper nec placerat quis, eleifend ut dolor. Proin tempor quis felis
</p>
<p class="flex-item">
quam sodales sit amet. Duis interdum augue quis scelerisque congue. Duis et imperdiet lorem. Quisque tincidunt, ex a gravida congue, mauris eros sollicitudin metus, a porta massa quam et nisi. Curabitur orci erat, pellentesque eu dui ac, rhoncus lobortis
</p>
<p class="flex-item">
ante. Nullam suscipit in risus quis iaculis. Cras sed quam leo. Aliquam aliquam dolor vel tellus ultrices pharetra. Donec laoreet ornare sapien non eleifend. Phasellus nec dui dui. Pellentesque auctor luctus nisl. Cras elit tellus, posuere eget nisl vitae,
semper ultrices dui. Cras porta orci tortor. Integer tristique enim quis convallis aliquet. Integer eu neque tellus. Pellentesque ut quam tincidunt, iaculis mi sed, aliquam dui. Sed vulputate dolor sed ante posuere tempor. In quis dapibus eros. In
hac
</p>
<p class="flex-item">
ante. Nullam suscipit in risus quis iaculis. Cras sed quam leo. Aliquam aliquam dolor vel tellus ultrices pharetra. Donec laoreet ornare sapien non eleifend. Phasellus nec dui dui. Pellentesque auctor luctus nisl. Cras elit tellus, posuere eget nisl vitae,
semper ultrices dui. Cras porta orci tortor. Integer tristique enim quis convallis aliquet. Integer eu neque tellus. Pellentesque ut quam tincidunt, iaculis mi sed, aliquam dui. Sed vulputate dolor sed ante posuere tempor. In quis dapibus eros. In
hac
</p>
</div>
这两个片段可能是您布局的替代方案。 您可能还想查看CSS3 grid。