0

実現したいこと
以下のカードを横にスライドできるような形に持っていきたいです。
しかし、現時点において横に配置することができていません。
そこでまず横にカードを並べたいです。

カードの仕組み
カードは裏で動いている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>

1 件の回答 1

1

現状のコードで、動いていない理由は、単純にセミコロンが抜けているからのようです。
下記のコードのようにセミコロンを足してください。

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>

1
  • ありがとうございました!無事解決いたしました!
    – user47454
    Commented 2021年8月3日 17:57

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。