调整大小时未在垂直列表中显示的项目
我展示了产品和右侧。它以正确的格式显示内联。但是当我调整窗口大小时，它应该变成垂直线并通过滚动逐个显示
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.products
{
display: inline-flex;
margin-top: 17px;
}
.product-description > a, p
{
font-size: 10px;
}
.product-description
{
margin-left: 5px;
margin-right: 5px;
}
.product-image
{
height: 130px;
width: 130px;
min-height: 130px;
min-width: 130px;
margin-top: 5px;
margin-left: 11px;
border-bottom: 1px solid lightgrey;
}
.product
{
width: 154px;
height: 219px;
min-width: 154px;
min-height: 219px;
border: 1px solid lightgrey;
margin-right: 5px;
}
.top-row
{
height: 40px;
line-height: 40px;
}
#row-1
{
background-color: orange;
color: white !important;
}
.row-icon
{
margin-left: 15px;
}
.items-container
{
margin-top: 20px; /*Remove*/
height: 300px;
border-bottom: 1px solid lightgrey;
border-right: 1px solid lightgrey;
}
#container-1
{
border-left: 4px solid orange;
}
.row-title
{
margin-left: 15px;
font-size: 15px;
font-weight: 700;
}
.categories
{
height: 255px;
overflow-y: scroll;
overflow-x: hidden;
width: 180px;
max-width: 180px;
min-width: 180px;
}
.categories-list
{
margin-top: 10px !important;
max-width: 180px;
min-width: 180px;
}
.category-item
{
padding-top: 6px;
padding-bottom: 6px;
margin-left: 0 !important;
margin-bottom: 0.5px;
border-radius: 0 !important;
border: 0 !important;
border-bottom: 1px solid lightgrey !important;
}
#item-row-1 ul li:hover
{
border-left: 2px solid orange !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container items-container" id="container-1">
<div class="top-row row" id="row-1">
<span class="row-icon"><i class="fa fa-camera fa-fw"></i></span><span class="row-title">Top Row</span>
</div>
<div class="row item-row" id="item-row-1">
<div class="col-lg-2 categories">
<ul class="list-group categories-list">
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">vItem 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
</ul>
</div>
<div class="col-lg-10">
<div class="products">
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div><div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
</div>
</div>
</div>
</div>
与在snipplet中一样，您可以看到浏览器大小很小，从而使产品不在其旁边的类别列表下方。任何人都可以帮助我吗？
当前输出
我想要的输出
2 个答案:
答案 0 :(得分：2)
使容器保持类别和产品“flex”并在产品容器上放置溢出物。见下面的代码
/**Adde this**/
.item-row {
display: flex;
}
/**Adde this**/
.categories + .col-lg-10 {
overflow-y: hidden;
}
.products
{
display: inline-flex;
margin-top: 17px;
}
.product-description > a, p
{
font-size: 10px;
}
.product-description
{
margin-left: 5px;
margin-right: 5px;
}
.product-image
{
height: 130px;
width: 130px;
min-height: 130px;
min-width: 130px;
margin-top: 5px;
margin-left: 11px;
border-bottom: 1px solid lightgrey;
}
.product
{
width: 154px;
height: 219px;
min-width: 154px;
min-height: 219px;
border: 1px solid lightgrey;
margin-right: 5px;
}
.top-row
{
height: 40px;
line-height: 40px;
}
#row-1
{
background-color: orange;
color: white !important;
}
.row-icon
{
margin-left: 15px;
}
.items-container
{
margin-top: 20px; /*Remove*/
height: 300px;
border-bottom: 1px solid lightgrey;
border-right: 1px solid lightgrey;
}
#container-1
{
border-left: 4px solid orange;
}
.row-title
{
margin-left: 15px;
font-size: 15px;
font-weight: 700;
}
.categories
{
height: 255px;
overflow-y: scroll;
overflow-x: hidden;
width: 180px;
max-width: 180px;
min-width: 180px;
}
.categories-list
{
margin-top: 10px !important;
max-width: 180px;
min-width: 180px;
}
.category-item
{
padding-top: 6px;
padding-bottom: 6px;
margin-left: 0 !important;
margin-bottom: 0.5px;
border-radius: 0 !important;
border: 0 !important;
border-bottom: 1px solid lightgrey !important;
}
#item-row-1 ul li:hover
{
border-left: 2px solid orange !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container items-container" id="container-1">
<div class="top-row row" id="row-1">
<span class="row-icon"><i class="fa fa-camera fa-fw"></i></span><span class="row-title">Top Row</span>
</div>
<div class="row item-row" id="item-row-1">
<div class="col-lg-2 categories">
<ul class="list-group categories-list">
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">vItem 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
<li class="list-group-item category-item">Item 1</li>
</ul>
</div>
<div class="col-lg-10">
<div class="products">
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
<div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div><div class="product">
<div class="product-image">
<img class="img-responsive" src="http://www.telemart.pk/media/catalog/product/cache/7/small_image/180x/9df78eab33525d08d6e5fb8d27136e95/l/i/lite2_1.jpg" width="130" height="130" alt="" />
</div>
<div class="product-description">
<a href="">Huawei Honor 8 Lite (3GB,16GB) With Warranty</a>
<p class="price">Rs. 32323</p>
<p>@ asdsa</p>
</div>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分：1)
随着屏幕尺寸缩小，只需将flex-wrap:wrap添加到.product wrap child element。
.products{
display: inline-flex;
margin-top: 17px;
flex-wrap:wrap; /*Add this*/
}
选中jsFiddle。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？