ฉันมี 3 รายการ (กล่อง) ภายใน flexbox ของฉันที่ฉันต้องการใช้เป็นไฮเปอร์ลิงก์ อย่างไรก็ตาม เมื่อฉันใส่แท็กเข้าไป จะทำให้เลย์เอาต์เสียหายโดยสิ้นเชิง ฉันจะตั้งค่าแต่ละรายการ (กล่อง) เป็นไฮเปอร์ลิงก์เพื่อให้ผู้ใช้สามารถคลิกพื้นที่ทั้งหมดและพาไปยังเว็บไซต์อื่นได้อย่างไร ณ ตอนนี้ฉันมีข้อความในกล่องที่ตั้งค่าเป็นลิงก์ แต่ฉันต้องการใช้ทั้งกล่องเป็นลิงค์
นี่คือ Codepen สำหรับมัน: https://codepen.io/mrhoward/pen/dqqOxj
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="shortcut icon" href="/thimg/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="/thcss/ton.css" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P|Open+Sans">
</head>
<body>
<h1 class="col">Each Square as Hyperlink</h1>
<h2 class="col">This is getting annoying</h2>
<div class="maincontain">
<div class="col gaming"><a href="/th"><h3 class="title">1</h3></a></div>
<div class="col music"><a href="/th"><h3 class="title">2</h3></a></div>
<div class="col dev"><a href="/th"><h3 class="title">3</h3></a></div>
</div>
</body>
</html>
ซีเอสเอส:
body {
background: #333;
color: #fff;
padding: 20px;
}
a {
text-decoration: none;
}
/* FLEXBOX */
* {
box-sizing: border-box;
}
.col {
padding: 20px;
}
.maincontain {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
justify-content: space-between;
}
.maincontain .col {
width: 32%;
height:400px;
align-items: stretch;
}
@media only screen and (max-width: 40em) {
.maincontain {
flex-direction: column;
height: 300px;
margin: 0 0 10px 0;
}
}
@media only screen and (max-width: 40em) {
.maincontain .col {width: 100%;}
.maincontain h3 { font-size: 1.3vh}
}
/* Item Stylig */
.gaming {
background: #d836eb;
}
.music {
background: #0000ff;
}
.dev {
background: #00ff00;
}
/* Font Styling */
h1 {
font-size:5vw;
font-family: 'Open Sans', sans-serif;
font-weight: lighter;
text-align: center;
padding: 50px;
}
h2 {
font-size:2vw;
font-family: 'Press Start 2P', cursive;
text-align: center;
padding: 0px 0px 20px 0px;
}
h3 {
font-size: 1.3vw;
font-family: 'Press Start 2P', cursive;
padding-top: 10px;
object-fit: cover;
}
.title{
color: white;
text-shadow: 1px 1px 4px #000000;
}
