我想为每个框添加链接,但是每当我尝试添加“ a”标签时,它都会使一切混乱。我想念的是什么:-/?我已经尝试了很多东西,但仍然无法找出问题所在。感谢您的帮助。
谢谢
这是应该看起来的样子
http://oi66.tinypic.com/iykcc5.jpg
https://jsfiddle.net/983wga5c/7/
的HTML
<div class="fwsmain">
<div class="fwsside side-text"><span>Tinutul Neamtului</span><p class="text">Pentru cei care au fost prima data, tinutul Neamtului a devenit locul in care te intorci cu bucurie. Platoul cu preparate moldovenesti de la Hanul Ancutei, drumetiile pe Ceahlau, fotografiile de la Barajul Bicaz, viata de noapte din Piatra Neamt, zimbrii, cetatea Neamtului, manastiri din top 10 din Romania, Muzeul de masti de la Tincabesti sau casa memoriala a lui Creanga, sunt doar cateva dintre atractiile memorabile din aceasta zona. Si ai cel putin cinci evenimente de traditie pe care nu trebuie sa le ratezi.</p></div>
<div class="fwsside">
<div class="fwsside-flex1">
<div class="fwsitem"><div class="hoverbg"><span>Case memoriale</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Turnul lui Ștefan</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Orașul de sus</span></div></div>
<div class="fwsitem"><div class="hoverbg"><span>Hai la ski</span></div></div>
<div class="fwsitem fullw"><div class="hoverbg"><span>Trebuie să vezi</span></div></div>
</div></div>
</div>
的CSS
.fwsmain{
width: 100%;
display: flex;
flex-wrap: wrap;}
.fwsside {
height: 100%;
width: 50%;}
.side-text{
margin:auto;
padding:0 20px;}
.fwsside-flex1{
height: 100%;
width: 100%;
display:flex;
flex-shrink:1;
flex-grow:1;
flex-wrap:wrap;}
.fwsside-flex1 .fwsitem {
width:50%;
text-align: center;
background-size:cover;
}
.fullw{
width:100% !important;}
.hoverbg:hover {
background:rgba(0, 0, 0, 0.6);
}
.fwsside-flex1 .fwsitem:nth-child(1) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/calistrat-hogas.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(2) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/clopotnita-turn-pnt.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(3) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/telegondola.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(4) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/ski.jpg');
}
.fwsside-flex1 .fwsitem:nth-child(5) {
background-image: url('http://descoperanordest.ro/wp-content/uploads/2016/01/cucuteni.jpg');
}
.fwsside-flex1 span {
line-height:33.3vh;
margin:auto;
font-size: 33px;
font-weight: bold;
color: #fff;}
最佳答案
看来您必须将class="fwsitem"
移到新添加的<a>
标记中,因为它们现在是flexbox容器的(.fwsside-flex1
)子代。
这是更新的fiddle。