実現したいこと
以下のカードを横にスライドできるような形に持っていきたいです。
しかし、現時点において横に配置することができていません。
そこでまず横にカードを並べたいです。
カードの仕組み
カードは裏で動いているCMSの追加に合わせて増えていく仕組みです。現時点においてカードは縦並びに追加されてしまいます。一番良い形としては、追加に伴い、カード自体のサイズを変えることなく、スクロールバーなどによりスクロールできるようにすることです。
試したこと
bootstrapを使ってカード表示→CSSが効きにくく、使いづらいため、CSS手打ちによるカード作成に切り替え
nowrapの追加
display: inline-blockの追加などを行いました。
div.code_group {
overflow-x: auto;
white-space: nowrap;
}
div.code__imgframe{
width: 100%;
height: auto;
padding-top: 56.25%;
background: #bbb;
box-sizing: border-box;
}
div.code{
width: 288px;
height: auto;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,.2)
display: inline-block;
}
img.code__imgframe{
width: 100%;
height: auto;
padding-top: 56.25%;
}
div.code__textbox{
width: 100%;
height: auto;
padding: 20px 18px;
background: #fff;
box-sizing: border-box;
}
div.code__textbox > * + *{
margin-top: 10px;
}
div.code__titletext{
font-size: 20px;
font-weight: bold;
line-height: 125%;
}
div.code__overviewtext{
font-size: 12px;
line-height: 150%;
}
<div class="code_group">
<div class="code">
<div class="code__imgframe"></div>
<div class="code__textbox">
<div class="code__titletext">
タイトル
</div>
<div class="code__overviewtext">
テキスト
</div>
</div>
</div>
<div class="code">
<div class="code__imgframe"></div>
<div class="code__textbox">
<div class="code__titletext">
タイトル
</div>
<div class="code__overviewtext">
テキスト
</div>
</div>
</div>
</div>