Question

I want to add links for every box but whenever I try to add an "a" tag it messes everything up. What am I missing :-/ ? I have tried a lot of stuff and still can't figure out what wrong. Would appreciate your help. Thanks This is how it is supposed to look 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;}

Answer 1

您似乎必须将class="fwsitem"移至新添加的<a>代码，因为它们现在是您的Flexbox容器（.fwsside-flex1）子代。

这是更新的fiddle。

添加<a> tag messes everything up

1 个答案: