html - 我如何使所有列都一样大？

标签 html css 

@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>&#9776</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:一些冰岛语单词可能在代码中

最佳答案

如果您设置 .leikjatexti 类的高度，则框将具有相同的高度；

你必须对齐盒子，因为中间的盒子比其他盒子高一点，但它们的高度是相等的

关于html - 我如何使所有列都一样大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36727861/

上一篇：html - 如何使用重复图像作为带间隙的边框

下一篇：html - 将菜单中的文本高度与图像高度匹配

相关文章：

html - 为什么这是明确的:both acting globally?

javascript - 按下回车键后jquery聚焦

css - 将 TD 的左边框设置为一种颜色，但没有将其放置在标题行的左侧？

HTML布局问题...

html - CSS:将嵌套元素定位在父元素边界之外

html - CSS 选择器不适用于 div 中的元素

css - 如何将手机键盘放在固定页脚 JqueryMobile 下方

javascript - Nav <ul> 是 mouseout 吗？怎么修

HTML5/CSS : Fix position of elements regardless of webpage size

javascript - 仅使用 File 对象选择单个文件

©2024 IT工具网  联系我们