具有全宽下拉面板的流体CSS产品网格（无绝对定位）
我看到了一个看起来相当具有挑战性的设计，我似乎无法在自己的头脑中找到解决方案，所以我正在联系社区，看看是否有人遇到过类似的问题。< / p>
我有一个电子商务商店，它有一个类别登陆页面，标记类似于上面的标记，尽管为了问题的目的，上面的标记已被简化。内容由PHP生成，因此需要像在foreach循环中一样进行设置。
这个想法是你有这个响应网格从1项到20项（如果需要）它显示有关的类别的信息，它是一个缩小版本。当您单击“查看更多”按钮/链接时，另一个面板会下拉，从而显示更详细的信息。我的问题是，因为项目是固定的宽度，并且它们都是向左浮动，因此它们显示在网格中，我的子类别drop然后由父容器绑定，有没有办法让这个下拉面板显示父容器外的全宽？在网格项下面（见图），也没有绝对定位，因为我希望下拉面板下面的网格项用一些jQuery下推。
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.subcategory-grid {
padding: 0 0 120px;
max-width: 1280px;
margin-left: auto;
margin-right: auto
}
.subcategory-grid::after {
clear: both;
content: "";
display: table
}
.subcategory-grid::after {
clear: both;
content: "";
display: table
}
.subcategory-grid .subcategory-item {
cursor: pointer;
margin-top: 28px;
margin-bottom: 28px
}
.subcategory-grid .subcategory-item img {
max-width: 100%;
min-width: 100%
}
@media screen and (min-width: 768px) {
.subcategory-grid .subcategory-item-container {
float: left;
display: block;
margin-right: 1.75788%;
width: 49.12106%;
margin-top: 28px;
margin-bottom: 28px;
float: left !important
}
.subcategory-grid .subcategory-item-container:last-child {
margin-right: 0
}
.subcategory-grid .subcategory-item-container:nth-child(2n) {
margin-right: 0
}
.subcategory-grid .subcategory-item-container:nth-child(2n+1) {
clear: left
}
}
.subcategory-grid .subcategory-item-container:hover .view-more {
border-bottom: 6px solid #000
}
.subcategory-grid .subcategory-info {
text-align: center
}
.subcategory-grid .subcategory-info h2 {
margin-top: 25px
}
.subcategory-grid .subcategory-info h2 a {
font-size: 24px
}
.subcategory-grid .subcategory-info .category-description {
margin: 20px 0
}
.subcategory-grid .subcategory-info .view-more {
text-align: center !important;
background: url('../img/icon/arrow-right-black.png?1437173465') no-repeat right 1px;
padding-right: 15px;
padding-bottom: 10px
}
.subcategory-grid .subcategory-info .view-more:hover {
border-bottom: 6px solid #000
}
.subcategory-grid .subcategory-drop {
display: none;
border-top: 1px solid #cecece;
border-bottom: 1px solid #cecece;
padding-bottom: 35px
}
.subcategory-grid .subcategory-drop .title {
position: relative;
display: block
}
.subcategory-grid .subcategory-drop .title h2 {
font-size: 1.875rem;
text-align: center;
border-bottom: 6px solid #000;
margin: 35px auto;
max-width: 426px;
padding-bottom: 5px
}
.subcategory-grid .subcategory-drop .title .close-button {
position: absolute;
height: 30px;
width: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: block;
right: 0;
top: 0;
background: url('../img/icon/cart-icon-remove.png?1437234524') no-repeat 0 0
}
.subcategory-grid .subcategory-drop .top strong {
text-transform: uppercase
}
.subcategory-grid .subcategory-drop .top p, .subcategory-grid .subcategory-drop .top .block-video-hub .videohub-item .videohub_item_subtitle, .block-video-hub .videohub-item .subcategory-grid .subcategory-drop .top .videohub_item_subtitle {
margin-bottom: 22px
}
.subcategory-grid .subcategory-drop .middle {
padding: 15px 0
}
.subcategory-grid .subcategory-drop .middle ul li {
padding: 7px 0
}
</style>
</head>
<body>
<div class="subcategory-grid">
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var container = $('.subcategory-grid'),
rangePanel = container.find('.subcategory-item');
rangePanel.each(function () {
var _this = $(this);
var viewMore = _this.find('.view-more');
viewMore.on('click', function () {
var dropPanel = $(this).closest('.subcategory-item-container').find('.subcategory-drop');
var closeButton = dropPanel.find('.close-button');
dropPanel.fadeIn();
closeButton.on('click', function () {
dropPanel.fadeOut();
});
});
});
});
</script>
</html>
请参阅此图表以获取更多信息：
1 个答案:
答案 0 :(得分：0)
您可以在媒体查询中使用以下CSS，但是您需要更新javascript以确保一次只能看到一个下拉列表。否则他们将超过一圈。我将$('.subcategory-drop').fadeOut(); // Just for demonstration放在viewMore点击功能中。
.subcategory-grid .subcategory-drop {
left: -103.516%;
position: relative;
width: 203.516%;
}
.subcategory-grid .subcategory-item-container:nth-child(2n+1) .subcategory-drop {
left: 0; /* reset left on odd items */
}
/**** OR This - A little better optimized than the above ****/
.subcategory-grid .subcategory-drop {
position: relative;
width: 203.516%;
}
.subcategory-grid .subcategory-item-container:nth-child(2n) .subcategory-drop {
left: -103.516%; /* set left on even items */
}
<强>段
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
.subcategory-grid {
padding: 0 0 120px;
max-width: 1280px;
margin-left: auto;
margin-right: auto
}
.subcategory-grid::after {
clear: both;
content: "";
display: table
}
.subcategory-grid::after {
clear: both;
content: "";
display: table
}
.subcategory-grid .subcategory-item {
cursor: pointer;
margin-top: 28px;
margin-bottom: 28px
}
.subcategory-grid .subcategory-item img {
max-width: 100%;
min-width: 100%
}
@media screen and (min-width: 768px) {
.subcategory-grid .subcategory-item-container {
float: left;
display: block;
margin-right: 1.75788%;
width: 49.12106%;
margin-top: 28px;
margin-bottom: 28px;
float: left !important
}
.subcategory-grid .subcategory-item-container:last-child {
margin-right: 0
}
.subcategory-grid .subcategory-item-container:nth-child(2n) {
margin-right: 0
}
.subcategory-grid .subcategory-item-container:nth-child(2n+1) {
clear: left
}
.subcategory-grid .subcategory-drop {
left: -103.516%;
position: relative;
width: 203.516%;
}
.subcategory-grid .subcategory-item-container:nth-child(2n+1) .subcategory-drop {
left: 0;
}
}
.subcategory-grid .subcategory-item-container:hover .view-more {
border-bottom: 6px solid #000
}
.subcategory-grid .subcategory-info {
text-align: center
}
.subcategory-grid .subcategory-info h2 {
margin-top: 25px
}
.subcategory-grid .subcategory-info h2 a {
font-size: 24px
}
.subcategory-grid .subcategory-info .category-description {
margin: 20px 0
}
.subcategory-grid .subcategory-info .view-more {
text-align: center !important;
background: url('../img/icon/arrow-right-black.png?1437173465') no-repeat right 1px;
padding-right: 15px;
padding-bottom: 10px
}
.subcategory-grid .subcategory-info .view-more:hover {
border-bottom: 6px solid #000
}
.subcategory-grid .subcategory-drop {
display: none;
border-top: 1px solid #cecece;
border-bottom: 1px solid #cecece;
padding-bottom: 35px
}
.subcategory-grid .subcategory-drop .title {
position: relative;
display: block
}
.subcategory-grid .subcategory-drop .title h2 {
font-size: 1.875rem;
text-align: center;
border-bottom: 6px solid #000;
margin: 35px auto;
max-width: 426px;
padding-bottom: 5px
}
.subcategory-grid .subcategory-drop .title .close-button {
position: absolute;
height: 30px;
width: 30px;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
display: block;
right: 0;
top: 0;
background: url('../img/icon/cart-icon-remove.png?1437234524') no-repeat 0 0
}
.subcategory-grid .subcategory-drop .top strong {
text-transform: uppercase
}
.subcategory-grid .subcategory-drop .top p, .subcategory-grid .subcategory-drop .top .block-video-hub .videohub-item .videohub_item_subtitle, .block-video-hub .videohub-item .subcategory-grid .subcategory-drop .top .videohub_item_subtitle {
margin-bottom: 22px
}
.subcategory-grid .subcategory-drop .middle {
padding: 15px 0
}
.subcategory-grid .subcategory-drop .middle ul li {
padding: 7px 0
}
</style>
</head>
<body>
<div class="subcategory-grid">
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
<div class="subcategory-item-container">
<div class="subcategory-item">
<!--Item Content-->
<img src="http://placehold.it/620x350"/>
<a href="#" class="view-more">View More</a>
<div class="subcategory-drop is-hidden">
<!--Drop Down Content-->
<p>Hello from the dropdown</p>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
var container = $('.subcategory-grid'),
rangePanel = container.find('.subcategory-item');
rangePanel.each(function () {
var _this = $(this);
var viewMore = _this.find('.view-more');
viewMore.on('click', function () {
// Just for demonstration
$('.subcategory-drop').fadeOut();
var dropPanel = $(this).closest('.subcategory-item-container').find('.subcategory-drop');
var closeButton = dropPanel.find('.close-button');
dropPanel.fadeIn();
closeButton.on('click', function () {
dropPanel.fadeOut();
});
});
});
});
</script>
</html>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？