我遇到的问题是，在我添加链接到我的图标之前，它会以视觉方式显示我想要的方式。然后，当我附加链接以使它们可点击时，它们的位置会发生变化。我无法确切地指出究竟是什么导致了这个问题，所以如果有人知道或可以看到它真的有帮助。谢谢！第一个片段是我想要的设计和布局，第二个片段是链接的问题。
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
max-width:1700px;
margin: 0 auto;
}
.box{
flex: 1 0 200px;
display: flex;
flex-flow: column wrap;
margin:1em;
transition: all 0.3 ease-in-out;
}
.box::after{
z-index:-1;
opacity:0;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
transition: opacity 0.3s ease-in-out;
}
.box:hover{
transform: scale(1.05, 1.05);
box-shadow: 0 1px 2px black;
}
.box:hover:after{
opacity:1;
}
.box img{
align-self: center;
width: 180px;
margin-bottom: 1em;
padding-top:10px;
}
.box .buy{
align-self: center;
margin-top: auto;
}
.flexwords{
align-self: center;
margin-top: auto;
}
#contacticon{
width:100px;
}<div id="colorbk">
<div class="container">
<div class="box">
<img src="computericon.svg" alt="" id="lapicon" />
<h2 class="flexwords">My Work</h2>
</div>
<div class="box">
<img src="haticon.svg" alt="" id="haticon" />
<h2 class="flexwords">My Education</h2>
</div>
<div class="box">
<img src="tieicon.svg" id="contacticon" alt="" />
<h2 class="flexwords">Contact Me</h2>
</div>
<br>
<hr class="hr1">
<div class="wrap">
<main>
<aside>
<h1>Do You Want to...</h1>
<ul>
<li>Rebrand yourself online</li>
<li>Take your current website and make it modern</li>
<li>Find a way to make information more accessible for customers</li>
<li> Improve customer service</li>
<li> Reach a wider range of people</li>
</ul>
</aside>
<article>
<h1>Do You Want to...</h1>
<ul>
<li>Create forms and documents that customers can fill out online</li>
<li>Start an email list for recurring customers</li>
<li>Show relatability with your audience</li>
<li> Have 24/7 online exposure</li>
<li>Create a map or a way for customers to find your location</li>
</ul>
</article>
</main>
</div>
</div>
</div>
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
max-width:1700px;
margin: 0 auto;
}
.box{
flex: 1 0 200px;
display: flex;
flex-flow: column wrap;
margin:1em;
transition: all 0.3 ease-in-out;
}
.box::after{
z-index:-1;
opacity:0;
box-shadow:0 5px 15px rgba(0,0,0,0.3);
transition: opacity 0.3s ease-in-out;
}
.box:hover{
transform: scale(1.05, 1.05);
box-shadow: 0 1px 2px black;
}
.box:hover:after{
opacity:1;
}
.box img{
align-self: center;
width: 180px;
margin-bottom: 1em;
padding-top:10px;
}
.box .buy{
align-self: center;
margin-top: auto;
}
.flexwords{
align-self: center;
margin-top: auto;
}
#contacticon{
width:100px;
}<div id="colorbk">
<div class="container">
<a href="skills.html"><div class="box">
<img src="computericon.svg" alt="" id="lapicon" />
<h2 class="flexwords">My Work</h2>
</div></a>
<a href="about.html"><div class="box">
<img src="haticon.svg" alt="" id="haticon" />
<h2 class="flexwords">My Education</h2>
</div></a>
<a href="contact.html"><div class="box">
<img src="tieicon.svg" id="contacticon" alt="" />
<h2 class="flexwords">Contact Me</h2>
</div></a>
<br>
<hr class="hr1">
<div class="wrap">
<main>
<aside>
<h1>Do You Want to...</h1>
<ul>
<li>Rebrand yourself online</li>
<li>Take your current website and make it modern</li>
<li>Find a way to make information more accessible for customers</li>
<li> Improve customer service</li>
<li> Reach a wider range of people</li>
</ul>
</aside>
<article>
<h1>Do You Want to...</h1>
<ul>
<li>Create forms and documents that customers can fill out online</li>
<li>Start an email list for recurring customers</li>
<li>Show relatability with your audience</li>
<li> Have 24/7 online exposure</li>
<li>Create a map or a way for customers to find your location</li>
</ul>
</article>
</main>
</div>
</div>
</div>
答案 0 :(得分：1)
将.box添加到a元素，而不是其中的div。
<div id="colorbk">
<div class="container">
<a href="skills.html" class="box"><div>
<img src="computericon.svg" alt="" id="lapicon" />
<h2 class="flexwords">My Work</h2>
</div></a>
<a href="about.html" class="box"><div>
<img src="haticon.svg" alt="" id="haticon" />
<h2 class="flexwords">My Education</h2>
</div></a>
<a href="contact.html" class="box"><div >
<img src="tieicon.svg" id="contacticon" alt="" />
<h2 class="flexwords">Contact Me</h2>
</div></a>
<br>
<hr class="hr1">
<div class="wrap">
<main>
<aside>
<h1>Do You Want to...</h1>
<ul>
<li>Rebrand yourself online</li>
<li>Take your current website and make it modern</li>
<li>Find a way to make information more accessible for customers</li>
<li> Improve customer service</li>
<li> Reach a wider range of people</li>
</ul>
</aside>
<article>
<h1>Do You Want to...</h1>
<ul>
<li>Create forms and documents that customers can fill out online</li>
<li>Start an email list for recurring customers</li>
<li>Show relatability with your audience</li>
<li> Have 24/7 online exposure</li>
<li>Create a map or a way for customers to find your location</li>
</ul>
</article>
</main>
</div>
</div>
</div>
答案 1 :(得分：1)
只需将div替换为锚a，然后将box类设置为
body {
background-image: url(footer_lodyas.png);
}
ml,
body {
width: 100%;
height: 100%;
}
.center {
margin-left: auto;
margin-right: auto;
display: block;
}
/***************flexbox icons************/
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
justify-content: center;
}
.box {
flex: 1 0 200px;
display: flex;
flex-flow: column wrap;
margin: 1em;
max-width: 300px;
}
.box img {
align-self: center;
width: 180px;
margin-bottom: 1em;
}
.box .buy {
align-self: center;
margin-top: auto;
}
.flexwords {
align-self: center;
margin-top: auto;
}
#contacticon {
width: 100px;
}
/****************horizontal line*************/
.hr1 {
border: none;
border-bottom: 1px solid #293839;
margin-left: 25%;
width: 50%;
color: #485A5F;
height: 2px;
}
/***************Do you want to section*************/
.wrap {
display: flex;
}
main {
flex: 1;
display: flex;
justify-content: center;
}
aside,
article {
padding: 2em;
}
aside {
flex: 0 auto;
}
article {
flex: 0 auto;
}
@media (max-width: 800px) {
main {
flex-direction: column;
align-items: center;
}
}<html>
<head>
<meta charset="UTF-8">
<link href="index.css" rel="stylesheet">
<title>portfolio</title>
</head>
<body>
<div class="container">
<a class="box" href="skills.html">
<img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
<h2 class="flexwords">My Work</h2>
</a>
<a class="box" href="about.html">
<img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" alt="" />
<h2 class="flexwords">My Education</h2>
</a>
<a class="box" href="contact.html">
<img src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/iMac-icon.png" id="contacticon" alt="" />
<h2 class="flexwords">Contact Me</h2>
</a>
<br>
<hr class="hr1">
<div class="wrap">
<main>
<aside>
<h1>Do You Want to...</h1>
<ul>
<li>Rebrand myself online</li>
<li>Take my current website and make it modern</li>
<li>Find a way to make information more accessible for customers</li>
<li>Improve customer service</li>
<li>Reach a wider range of people</li>
</ul>
</aside>
<article>
<h1>Do You Want to...</h1>
<ul>
<li>Create forms and documents that customers can fill out online</li>
<li>Start an email list for recurring customers</li>
<li>Show relatability with my audience</li>
<li>Have 24/7 online exposure</li>
<li>Create a map or a way for customers to find my location</li>
</ul>
</article>
</main>
</div>