インスタ風の3列レイアウトをしたい。
そして、女の子をクリックした際にはリンク移動など。
ここにメソッドをクリックした際には、いいねを発火させたい。
参考
https://pecopla.net/web-column/flexbox-1
コピペで動きますよ
hoge.vue
<style>.insta-container{display:flex;flex-wrap:wrap;}/*sample1*/.insta-container{display:flex;display:-webkit-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;}.insta-container>div{position:relative;width:33.3%;height:auto;margin:0%;/*隙間を調節したい*/overflow:hidden;}.insta-container>div:before{content:"";display:block;padding-top:100%;}.inner{position:absolute;top:0;left:0;width:100%;height:100%;}.innerimg{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:auto;height:100%;}.insta-container>divspan.text-box{position:absolute;bottom:2%;right:0%;margin:0;/*余計な隙間を除く*/padding:5px15px;/*余計な隙間を除く*/font-size:14px;/*サイズ*/border-radius:03px3px0;font-weight:bold;color:#fff;background-color:rgba(0,0,0,0.4);}.insta-container>div.inner{display:block;}</style><template><div><div>3列画像を作ってみる</div><divclass="insta-container"><div><aclass="inner"@click="ue()"><imgsrc="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg"><spanclass="text-box"><a@click.stop="hoge()">ここにメソッド</a></span></a></div><div><aclass="inner"@click="ue()"><imgsrc="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg"><spanclass="text-box"><a@click.stop="hoge()">ここにメソッド</a></span></a></div><div><aclass="inner"@click="ue()"><imgsrc="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg"><spanclass="text-box"><a@click.stop="hoge()">ここにメソッド</a></span></a></div><div><aclass="inner"@click="ue()"><imgsrc="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg"><spanclass="text-box"><a@click.stop="hoge()">ここにメソッド</a></span></a></div><div><aclass="inner"@click="ue()"><imgsrc="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg"><spanclass="text-box"><a@click.stop="hoge()">ここにメソッド</a></span></a></div><div><aclass="inner"@click="ue()"><imgsrc="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg"><spanclass="text-box"><a@click.stop="hoge()">ここにメソッド</a></span></a></div><div><aclass="inner"@click="ue()"><imgsrc="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg"><spanclass="text-box"><a@click.stop="hoge()">ここにメソッド</a></span></a></div><div><aclass="inner"@click="ue()"><imgsrc="https://i.pinimg.com/originals/9d/d9/d5/9dd9d5ceb79dd3427d118ff4a1017570.jpg"><spanclass="text-box"><a@click.stop="hoge()">ここにメソッド</a></span></a></div></div></div></template><script>exportdefault{methods:{ue(){alert("上");},hoge(){alert("伝達停止");},}}</script>こんな感じでOK!