Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

インスタ風 3列 レイアウト

$
0
0

インスタ風の3列レイアウトをしたい。

hogehoge.png

そして、女の子をクリックした際にはリンク移動など。
ここにメソッドをクリックした際には、いいねを発火させたい。

参考
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!


Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>