Q&A
前提・実現したいこと
現在口コミ投稿サイトを作っており、Tumblrのように個々の投稿の長さによって、
投稿ボックスの長さを変えたいのですが、うまくいきません。
ご存知の方がいらっしゃいましたらご教授いただけると嬉しいです。
参考：
https://www.tumblr.com/explore/text
h:300]
発生している問題・エラーメッセージ
横に並んでいる場合、最長文章の投稿ボックスに長さが統一されてしまう。
該当のソースコード
HAML
1.card-deck.clearfix 2 .card 3 .card-body 4 .card-heading.clearfix 5 %img.d-flex.pull-left.align-self-start.mr-3{:src => "https://i.imgur.com/yMPCq5O.png"} 6 %h5.card__user-name.pull-left 安室 透 7 .posting-box__top-items__user-tags.pull-left 8 %ul.pull-left 9 %li.pull-left.p-2.tag-list 10 %i.fa.fa-building.fa-1x.tag-text 起業 11 %li.pull-left.p-2.tag-list 12 %i.fa.fa-github.fa-1x.tag-text IT系 13 %li.pull-left.p-2.tag-list 14 %i.fa.fa-github.fa-1x.tag-text 転職 15 .card-content.clearfix 16 %p.card-text 最近うちの猫は、この物置みたいなところに居住を移したみたいで、ここにはいろんなアーティストのDVDやCDを置いてるんですが、この下に私のベッドがあって、夜な夜な固いプラスチックの塊を上から落として来る。たぶん殺ろうとしてる。殺るか殺られるかの瀬戸際で暮らしてる最近うちの猫は、この物置みたいなところに居住を移したみたいで、ここにはいろんなアーティストのDVDやCDを置いてるんですが、この下に私のベッドがあって、夜な夜な固いプラスチックの塊を上から落として来る。たぶん殺ろうとしてる。殺るか殺られるかの瀬戸際で暮らしてる最近うちの猫は、この物置みたいなところに居住を移したみたいで、ここにはいろんなアーティストのDVDやCDを置いてるんですが、この下に私のベッドがあって、夜な夜な固いプラスチックの塊を上から落として来る。たぶん殺ろうとしてる。殺るか殺られるかの瀬戸際で暮らしてる 17 .card-footer.clearfix 18 .card-footer__left-items.pull-left 19 .card-footer__right-items.pull-right 20 %ul 21 %li.pull-left.p-2.card-icons 22 %i.fa.fa-comment.fa-1x 23 %li.pull-left.p-2.card-icons 24 %i.fa.fa-heart.fa-1x.tag-text 25 .card 26 .card-body 27 .card-heading.clearfix 28 %img.d-flex.pull-left.align-self-start.mr-3{:src => "https://i.imgur.com/41g9hgf.png"} 29 %h5.card__user-name.pull-left 吉岡 里帆 30 .posting-box__top-items__user-tags.pull-left 31 %ul.pull-left 32 %li.pull-left.p-2.tag-list 33 %i.fa.fa-building.fa-1x.tag-text 起業 34 %li.pull-left.p-2.tag-list 35 %i.fa.fa-github.fa-1x.tag-text IT系 36 %li.pull-left.p-2.tag-list 37 %i.fa.fa-github.fa-1x.tag-text 転職 38 .card-content.clearfix 39 %p.card-text This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. 40 .card-footer.clearfix 41 .card-footer__left-items.pull-left 42 .card-footer__right-items.pull-right 43 %ul 44 %li.pull-left.p-2.card-icons 45 %i.fa.fa-comment.fa-1x 46 %li.pull-left.p-2.card-icons 47 %i.fa.fa-heart.fa-1x.tag-text
CSS
1 .card-deck { 2 margin-top: 30px; 3 // min-width: 300px; 4 padding:0 30px; 5 6 7 .card { 8 border-radius: 8px; 9 min-width: 250px; 10 max-width: 250px; 11 margin-bottom: 35px; 12 display: flex; 13 min-height: 100%; 14 15 .card-body { 16 padding-top: 10px; 17 min-height: 100%; 18 19 .card-heading { 20 border-bottom: solid 1px #dfdfdf; 21 padding-bottom: 5px; 22 margin-bottom: 5px; 23 img { 24 height: 45px; 25 width: 45px; 26 } 27 28 h5 { 29 margin-top: 0px; 30 margin-right: 10px; 31 } 32 ul { 33 padding-left: 0px; 34 35 li { 36 margin-bottom: 0px; 37 } 38 } 39 } 40 41 .card-footer{ 42 background-color: white; 43 border-top: none; 44 .card-icons { 45 margin: 10px 0 10px 12px; 46 display: inline-block; 47 position: relative; 48 text-align: left; 49 height: 30px; 50 width: 30px; 51 cursor: pointer; 52 } 53 } 54 } 55 } 56 }
試したこと
・flexプロパティの実施
回答1件
0
ベストアンサー
レイアウト系のプラグインを使用しているのでは。
【【jQuery】フィルターやソート機能にも対応したMasonry風jQueryプラグイン［Isotope］の使い方。 - ONZE】
https://on-ze.com/archives/1868
【Isotope · Layout modes】
https://isotope.metafizzy.co/layout-modes.html
【【JavaScript】超高機能なグリッドレイアウトを実装する［Packery］はドラッグによる並べ替えにも対応！ - ONZE】
https://on-ze.com/archives/2225
【Packery】
https://packery.metafizzy.co/
【【jQuery】可変グリッド・レイアウトの超有名プラグイン［Masonry］を紹介します。 - ONZE】
https://on-ze.com/archives/1530
【Masonry】
https://masonry.desandro.com/
投稿2018/05/27 12:37
編集2018/05/27 16:57
総合スコア69407
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/05/27 16:57
2018/05/28 06:27