Saya memiliki 3 item (kotak) di dalam flexbox saya yang ingin saya gunakan sebagai hyperlink. Namun, ketika saya membungkus tag in, itu benar-benar merusak tata letak. Bagaimana cara mengatur setiap item (kotak) sebagai hyperlink sehingga pengguna dapat mengklik seluruh area dan mengarahkan mereka ke situs web lain? Sampai sekarang, saya memiliki teks di dalam kotak yang ditetapkan sebagai tautan. Tapi saya ingin menggunakan seluruh kotak sebagai tautan.
Berikut ini codepennya: 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="/idimg/misc/favicon.png">
<meta name="description" content="">
<meta name="author" content="">
<title>Flexbox Problem.</title>
<link href="/idcss/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="/id"><h3 class="title">1</h3></a></div>
<div class="col music"><a href="/id"><h3 class="title">2</h3></a></div>
<div class="col dev"><a href="/id"><h3 class="title">3</h3></a></div>
</div>
</body>
</html>
CSS:
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;
}
