根据内容的高度和宽度使div的高度扩展
这是我的html结构
$('.product').click(function(){
var $this = $(this).find('.product-desc');
$(".product-desc").not($this).hide('slow');
$this.toggle('slow');
}).prod-container>.col-md-3 {
padding: 0 6px;
}
.prooduct-title img {
width: 100%;
height: 100%;
}
/*.prooduct-title img {
min-width: 70%;
max-height: 105px;
margin: 5px 20px;
}*/
.product {
background: linear-gradient(-58deg, #0057a0, #00b8e1);
color: #fff;
text-transform: uppercase;
margin: 12px 0;
cursor: pointer;
display: inline-block;
}
.prooduct-title {
min-height: 105px;
display: flex;
height: 121px;
}
.prooduct-title>div {
padding: 0;
}
.products-section .col-md-10 .col-md-3 {
padding: 0 6px;
}
.products-section {
margin: 7px 0;
}
.prod-title {
/*padding: 10px!important;*/
align-self: center;
font-size: 17px;
}
.prod-title p {
padding: 10px;
margin-bottom: 0;
line-height: 18px;
}
.product-desc ul {
padding: 0px 0px 0 0px;
margin: 0;
text-transform: none;
list-style: none;
float: left;
}
.product-desc ul li {
list-style-type: none;
padding: 5px 18px 5px 28px;
transition: all 0.5s ease-in-out;
}
.product-desc ul li:hover {
background: rgba(0, 0, 0, 0.3);
}
.product-desc ul li a,
.product-desc ul li a:active,
.product-desc ul li a:focus,
.product-desc ul li a:hover {
display: block;
color: #fff;
text-decoration: none;
}
.product-desc ul li>p:first-child {
margin-bottom: 0;
font-size: 16px;
line-height: 18px;
padding-bottom: 7px;
}
.product-desc ul li>p:last-child {
margin-bottom: 5px;
font-size: 13px;
}
.product-desc ul li a>p:last-child {
font-size: 12px;
padding-left: 10px;
margin-bottom: 0;
}
.vertical-track {
width: 5px;
background-color: rgba(0, 0, 0, 0.3);
}
.vertical-handle {
width: 100%;
border-radius: 0px;
background-color: #fff;
}
.product-desc ul+div {
right: 10px!important;
left: auto!important;
}
.search-results {
background: rgba(233, 233, 233, 0.9);
width: 100%;
position: absolute;
z-index: 1;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
-webkit-box-shadow: 0 10px 10px -10px #000000;
-moz-box-shadow: 0 10px 10px -10px #000000;
box-shadow: 0 10px 10px -10px #000000;
z-index: 1000;
top: 100%;
}
.results.default-skin.scrollable {
border-radius: 0;
}
.results.default-skin.scrollable a {
padding: 10px;
}
.results.default-skin.scrollable a:hover {
background-color: #1a3a5f;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prod-container clearfix">
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="product clearfix" style="background: linear-gradient(-58deg, #0057a0, #00b8e1);">
<div class="prooduct-title clearfix">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum Lorem Ipsum is simply dummy</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product clearfix" style="background: linear-gradient(-58deg, #d23a36, #ed6e26);">
<div class="prooduct-title clearfix">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product clearfix" style="background: linear-gradient(-58deg, #3dbb9b, #69c074);">
<div class="prooduct-title clearfix">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="product clearfix" style="background: linear-gradient(-58deg, #008fad, #00b4db);">
<div class="prooduct-title clearfix">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product clearfix" style="background: linear-gradient(-58deg, #464a52, #5a5e65);">
<div class="prooduct-title">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Screw</p>
<p>0 Battle Card</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product clearfix" style="background: linear-gradient(-58deg, #b6b820, #d5d425 );">
<div class="prooduct-title">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="product clearfix" style="background: linear-gradient(-58deg, #6fa031, #82b83a);">
<div class="prooduct-title clearfix">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product clearfix" style="background: linear-gradient(-58deg, #00b7a8, #00b7a8);">
<div class="prooduct-title clearfix">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<div class="product clearfix" style="background: linear-gradient(-58deg, #f79227, #fcb335);">
<div class="prooduct-title">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product clearfix" style="background: linear-gradient(-58deg, #838383, #9b9b9b);">
<div class="prooduct-title clearfix">
<div class="col-md-6 col-sm-6 col-xs-12">
<img src="https://www.w3schools.com/w3css/img_lights.jpg">
</div>
<div class="col-md-6 col-sm-6 col-xs-12 prod-title">
<p>Lorem Ipsum</p>
</div>
</div>
<div class="product-desc" style="display:none;">
<ul>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
<li>
<a href="#">
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
现在我想点击这样扩展。
我想根据内容的宽度和高度扩展div，我该怎么办呢。当我点击div时，它的信息正在向下滑动。现在我必须像这样创建，当我点击div时，它的父母的高度和宽度应该根据滑动内容的宽度和高度而改变。请帮助。
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？