Html 内容左侧的“对齐”菜单

我有一个商店项目的画廊和一个菜单，其中有所有商店项目的类别。我想对齐商店项目左侧的菜单，如下面的示例所示。我试过float:left，但是菜单并没有像预期的那样调整页面大小。那么，最好的方法是什么呢

我希望它看起来像什么

将所有代码组合在一起-

产品陈列室的单独小提琴-

商店侧边栏菜单的单独小提琴-

商店侧边栏菜单的html

类别


全部的


第一类














第2类







第3类








这是一把小提琴


添加
位置：绝对
和
左侧：0pxz-index:100
值将菜单浮动到CSS
.shop侧边栏

.shop-sidebar {
  position:absolute;
  left:0px;
  z-index:100;
}

并添加以下css，为所有产品的第一个子产品留出空间

.shop-gallery .product:first-child{
  margin-left:20%;
}


var$parent=$（“.shop gallery”），
$items=$parent.find（“.product”），
$loadMoreBtn=$（“#加载更多注释”），
maxItems=4，
hiddenClass=“视觉隐藏”；
//将可视隐藏类添加到maxItems之外的项
$。每个（$项目，功能（idx，项目）{
如果（idx>maxItems-1）{
$（this.addClass（hiddenClass）；
}
});
//单击show more按钮show more=maxItems
//如果没有剩余的可显示的按钮，则显示更多按钮
$loadMoreBtn.on（“单击”，函数（e）{
$（“+hiddenClass）.每个（函数（idx，项）{
如果（idx
.shop侧边栏{
位置：绝对位置；
左：0px；
z指数：100；
宽度：20%；
显示：内联块；
右边填充：65px；
垂直对齐：顶部；
字体系列：“maison”，无衬线；
字号：600；
字体大小：11px；
颜色：#000；
字母间距：1.5px；
线高：18px；
文本转换：大写；
}
工厂导航{
列表样式：无；
填充：0；
保证金：0；
}
ul.shop-nav li.活动，ul.shop-nav li:悬停{
颜色：#000；
不透明度：1；
字体大小：粗体；
}
ul.shop-nav-li{
过渡：均为0.3秒；
光标：指针；
填充：18px 20px；
背景色：#F8；
边缘底部：2px；
}
ul.shop-nav li.active a{
颜色：#000；
}
ul.shop-nav a{
颜色：#000；
}
ul.shop-nav li.活动，ul.shop-nav li:悬停{
颜色：#000；
不透明度：1；
字体大小：粗体；
}
ul.shop-nav li svg{
宽度：10px；
高度：10px；
垂直对齐：文本底部；
填写：#000；
过渡：均为0.3秒；
浮动：对；
}
商铺导航{
显示：无；
列表样式：无；
左侧填充：0；
利润率：12px0；
}
ul.shop-nav-li ul-li{
颜色：#000；
边界：0！重要；
字体系列：“maison”，无衬线；
字体大小：12px；
字母间距：0；
填充：0；
字体大小：正常；
文本转换：无；
边缘底部：12px；
}
商店导航{
左边距：16像素；
}
输入[type='radio']{
显示：无；
}
输入[type='checkbox']{
显示：无；
}
#子列表，
#次级分类1，
#次级分类2，
#次级分类3{
显示：无；
}
#类别：选中~#子列表{
显示：块；
}
#类别1：选中#子分类类别1{
显示：块；
}
#类别2：选中~#子分类类别2{
显示：块；
}
#类别3：选中#子分类类别3{
显示：块；
}
.产品颜色{
宽度：100%；
身高：100%；
背景色：rgba（255、255、255、0.9）；
位置：绝对位置；
左：0；
排名：0；
不透明度：0；
过渡：均为0.3秒；
}
.产品颜色：悬停{
不透明度：1；
}
.产品img{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
宽度：自动；
高度：自动；
保证金：自动；
最大宽度：计算（100%-48px）；
最大高度：计算（100%-48px）；
}
.产品{
宽度：21%；
身高：0；
填充顶部：30%；
显示：内联块；
位置：相对位置；
利润底部：3.5%；
光标：指针；
}
.产品颜色h2{
位置：绝对位置；
左：50%；
最高：50%；
-webkit转换：translateY（-50%）translateX（-50%）；
-moz变换：translateY（-50%）translateX（-50%）；
-ms转换：translateY（-50%）translateX（-50%）；
-o-转换：translateY（-50%）translateX（-50%）；
转化：translateY（-50%）translateX（-50%）；
字体系列：“maison”，无衬线；
字体大小：14px；
颜色：#000；
线高：18px；
保证金：0；
文本对齐：居中；
填充：0 12px；
}
.产品阴影h2跨度{
显示：块；
字体大小：正常；
字体：斜体；
}
.产品价格{
填充顶部：9px；
字体风格：普通；
颜色：#ef9292；
}
.视觉隐藏{
位置：绝对位置；
溢出：隐藏；
剪辑：rect（0）；
高度：1px；
宽度：1px；
保证金：-1px；
填充：0；
边界：0；
}
.商店画廊.产品：第一个孩子{
左缘：20%；
}
以下是整个片段




类别


全部的


第一类