0
私が持っている問題は、アイコンにリンクを追加する前に、視覚的に私が望むようにレイアウトされていることです。それから私は彼らにリンクをつけてクリック可能にして、ポジションを変えます。私はこの問題の原因を正確に突き止めることができないので、誰かがそれを知っているか実際に役立つことが分かっている場合はそうすることができません。ありがとう！最初のスニペットは私が望むデザインとレイアウトで、2番目のスニペットはリンクの問題です。フレックスボックスのリンクボタンの応答の問題
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
\t max-width:1700px;
margin: 0 auto;
}
.box{
flex: 1 0 200px;
display: flex;
flex-flow: column wrap;
margin:1em;
\t
\t transition: all 0.3 ease-in-out;
\t
}
.box::after{
\t z-index:-1;
\t opacity:0;
\t box-shadow:0 5px 15px rgba(0,0,0,0.3);
\t transition: opacity 0.3s ease-in-out;
}
.box:hover{
\t transform: scale(1.05, 1.05);
\t box-shadow: 0 1px 2px black;
}
.box:hover:after{
\t opacity:1;
}
.box img{
align-self: center;
width: 180px;
margin-bottom: 1em;
\t padding-top:10px;
}
.box .buy{
align-self: center;
margin-top: auto;
}
.flexwords{
\t align-self: center;
\t margin-top: auto;
}
#contacticon{
\t \t width:100px;
\t }<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>
\t <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>
\t </div>.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
\t max-width:1700px;
margin: 0 auto;
}
.box{
flex: 1 0 200px;
display: flex;
flex-flow: column wrap;
margin:1em;
\t
\t transition: all 0.3 ease-in-out;
\t
}
.box::after{
\t z-index:-1;
\t opacity:0;
\t box-shadow:0 5px 15px rgba(0,0,0,0.3);
\t transition: opacity 0.3s ease-in-out;
}
.box:hover{
\t transform: scale(1.05, 1.05);
\t box-shadow: 0 1px 2px black;
}
.box:hover:after{
\t opacity:1;
}
.box img{
align-self: center;
width: 180px;
margin-bottom: 1em;
\t padding-top:10px;
}
.box .buy{
align-self: center;
margin-top: auto;
}
.flexwords{
\t align-self: center;
\t margin-top: auto;
}
#contacticon{
\t \t width:100px;
\t }<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>
\t <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>
\t </div>
を
boxクラスを設定！ありがとう@LGSon私は本当にそれを感謝します。 – Cakers@Cakers大歓迎です – LGSon