以下のサイトで載せてるカテゴリーページのCSSですが、このまま使うと段差が生じてしまいます為、面一で並ばせたいのですが、出来ますか?
Yahoo!ショッピングの表示形式が理想です。
(列は3列のままで使いたいです)
商品の囲みを消し、商品名の文字数制限をもっと短く、もしくは商品名を削除したいです。
https://www.cyber-records.co.jp/blog/rakuten/rakuten-attract-customers/rms_sp_technique_02/#i-6#sCSLContainer {
box-sizing: border-box;
width: 100%;
padding: 10px 3px 15px 4px;
}
#sCSLContainer > a {
box-sizing: border-box;
display: inline-table;
width: 33.333333%; /* 2段組の場合は50% */
width : calc(100% / 3) ; /* 2段組の場合は削除 */
overflow: hidden;
padding: 0 2px 1px;
}
#sCSLContainer > a > div {
box-sizing: border-box;
display: inline-block !important;
width: 100%;
height: auto !important;
background: none #ffffff;
border: solid 1px #d2d2d2;
padding: 6px 4px;
margin: 0;
overflow: hidden;
}
/* 商品画像部分 */
#sCSLContainer .inLeft {
width: 100%;
margin-bottom: 10px;
}
#sCSLContainer .inLeft img {
box-sizing: border-box;
width: 100%;
border: solid 1px #ececec;
}
/* 商品名・価格部分 */
#sCSLContainer inRight .txtheight {
height: 45px;
min-height:auto;
margin-bottom: 5px;
padding: 0;
}
#sCSLContainer .inRight .ctgItemNormal{
background: none;
position: relative;
height: 100%;
padding: 0;
font-size: 13px;
line-height: 15px;
letter-spacing: -0.5px;
word-wrap: break-word;
overflow: hidden;
}
#sCSLContainer .inRight .ctgItemNormal:before,
#sCSLContainer .inRight .ctgItemNormal:after {
position: absolute;
background-color: #ffffff;
}
#sCSLContainer .inRight .ctgItemNormal:before {
content: "...";
bottom: 0;
right: 0;
}
#sCSLContainer .inRight .ctgItemNormal:after {
content: "";
width: 100%;
height: 100%;
}
#sCSLContainer .inRight .txtprice {
padding: 0;
color: #bf0000;
text-align: left;
}
#sCSLContainer .inRight .txtprice span:last-child {
display: block;
color: #333333;
}