目标：尝试将扩展的图像网格合并到我的网站中，该网格具有3列4行。我正在使用810w x 1050h的区域。
问题：我似乎无法正确显示3 x 4网格。您可以在这里看到我的意思：http://rthhockey.com/coaching2我玩过最小/最大身高无济于事。
我尝试过的方法：我已按33.3333分配了每个链接。...％似乎没有任何效果。我已经使用该代码大约三天了，我不想让事情变得更糟。我敢肯定，你们中的一个人可以很快找到我所缺少的东西。
这是我在其中找到此网格的CodePen：https://codepen.io/DanBoulet/pen/YXQBbZ
任何人和所有协助将不胜感激。感谢您的宝贵时间。
CSS
body {
background-color: #fff;
color: #ffffff;
font-family: open sans;
font-size: 100%;
font-weight: 400;
line-height: 1.5;
margin: 0 auto;
max-width: 100%;
height: 1050px;
max-height: 1050px;
overflow-y: scroll;
padding: 5px;
}
.expanding-grid {
position: relative;
width: 100%;
max-width: 100%;
}
.expanding-grid .links {
display: block;
margin: 0 -1em;
overflow: hidden;
padding: 5px;
}
.expanding-grid .links > li {
box-sizing: border-box;
float: left;
padding: 1em;
}
.expanding-grid .links > li a {
background: #ff2200;
color: #fff;
display: block;
font-size: 24px;
line-height: 1;
padding: 25% 1em;
position: relative;
width: 250px;
height: 150px;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.expanding-grid .links > li a:hover {
background: #ffb733;
}
.expanding-grid .links > li a.active {
background: #cc8400;
}
.expanding-grid .links > li a.active:after {
background-color: transparent;
border-bottom: 0.375em solid #888;
border-left: 0.375em solid transparent;
border-right: 0.375em solid transparent;
bottom: -0.5em;
content: '';
height: 0;
left: 50%;
margin-left: -0.375em;
position: absolute;
width: 0;
}
@media only screen and (max-width: 810px) {
.expanding-grid .links > li {
width: 50%;
}
.expanding-grid .links > li:nth-of-type(2n+1) {
clear: left;
}
}
@media only screen and (min-width: 40em) and (max-width: 810px) {
.expanding-grid .links > li {
width: 33.3333333333%;
}
.expanding-grid .links > li:nth-of-type(3n+1) {
clear: left;
}
}
@media only screen and (min-width: 810px) {
.expanding-grid .links > li {
width: 33.3333333333%;
}
.expanding-grid .links > li:nth-of-type(4n+1) {
clear: left;
}
}
.expanding-grid .spacer {
background-color: #ff2200;
clear: both;
display: block;
margin: 0 1em;
}
.expanding-grid .expanding-container {
clear: both;
display: none;
overflow: hidden;
width: 100%;
}
.expanding-grid .expanding-container.expanded, .expanding-grid .expanding-container:target {
display: block;
}
.expanding-grid .hentry {
background: #494949;
box-sizing: border-box;
clear: both;
color: #fff;
min-height: 4em;
overflow: hidden;
padding: 1em;
width: 100%;
}
.expanding-grid .hentry .entry-image {
box-sizing: border-box;
float: right;
margin-left: 1em;
padding: 0.25em 0 0.52em 1em;
text-align: center;
width: 50%;
}
.expanding-grid .hentry .entry-title {
font-size: 28px;
}
.expanding-grid .close-button {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNLjcuN2wxOCAxOG0tMTggMGwxOC0xOCIvPjwvc3ZnPg==) no-repeat scroll 50% 50% transparent;
color: #fff;
display: inline-block;
height: 20px;
line-height: 1;
overflow: hidden;
padding: 1.5em 2em;
text-decoration: none;
text-indent: 5em;
white-space: nowrap;
width: 20px;
will-change: opacity;
z-index: 5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.expanding-grid .close-button.active {
transition: opacity 0.2s;
}
.expanding-grid .close-button:hover {
opacity: 0.5;
}
.img-placeholder {
background: #ffffff;
color: #fff;
font-size: 4em;
font-weight: 300;
line-height: 1;
width: 400px;
height: 350px;
padding: 5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
HTML
<div class="expanding-grid">
<ul class="links">
<li><a href="#section1">Jackson 5</a></li>
<li><a href="#section2">2</a></li>
<li><a href="#section3">3</a></li>
<li><a href="#section4">4</a></li>
<li><a href="#section5">5</a></li>
<li><a href="#section6">6</a></li>
<li><a href="#section7">7</a></li>
<li><a href="#section8">8</a></li>
<li><a href="#section9">9</a></li>
<li><a href="#section10">10</a></li>
<li><a href="#section11">11</a></li>
<li><a href="#section12">12</a></li>
</ul>
<div id="section1" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Jackson 5</h1>
<div class="entry-image"><div class="img-placeholder"><img src="https://i.imgur.com/Pa3wzWI.png?1"></div></div>
<p>- 3 Skaters Run This Drill At Once<br>- F1 Skates Top Of Circle And Takes Shot On Goal<br>- F2 Skates Full Circle Without Puck<br>- F3 Skates Inside/Out Pattern Around Face-Off Dot With Puck, Breaks On Goal For Shot<br>- F1 Picks Up Puck Below Far Circle, Matches Timing Of F2 Through Neutral Zone And Dishes Pass To F2<br>-F2 Breaks In On Goal For Shot While F1 Crashes Net For Rebound</p>
</article>
</div>
<div id="section2" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">2</div></div>
<p>- 3 Skaters Run This Drill At Once<br>- F1 Skates Top Of Circle And Takes Shot On Goal<br>- F2 Skates Full Circle Without Puck</p>
</article>
</div>
<div id="section3" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">3</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section4" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">4</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section5" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">5</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section6" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">6</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section7" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">7</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section8" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">8</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section9" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">9</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section10" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">10</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section11" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">11</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section12" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">12</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
</div>
Script
var getLastSiblingInRow = function (element) {
var candidate = element,
elementTop = element.offsetTop;
while (candidate.nextElementSibling !== null) {
if (candidate.nextElementSibling.offsetTop > elementTop) {
return candidate;
}
candidate = candidate.nextElementSibling;
}
return candidate;
};
var calculatePageScrollDistance = function (top, bottom) {
var windowScrollDistance = $(window).scrollTop(),
windowHeight = $(window).height(),
scrollDistanceToTop,
scrollDistanceToBottom;
if (windowScrollDistance >= top) {
return top - windowScrollDistance;
}
else if ((windowScrollDistance + windowHeight) >= bottom) {
return 0;
}
else {
scrollDistanceToTop = top - windowScrollDistance;
// Find the distance we need to scroll to reveal the entire section.
scrollDistanceToBottom = bottom - (windowScrollDistance + windowHeight);
return Math.min(scrollDistanceToTop, scrollDistanceToBottom);
}
};
var expandingGrid = function (context, options) {
var defaults = {
animationDuration: 250,
linksSelector: '.links a',
expandingAreaSelector: '.expanding-container',
closeButtonMarkup: '<a href="#" class="close-button">Close</a>',
spacerMarkup: '<span class="spacer" aria-hidden="true"/>',
elementActiveClass: 'active',
elementExpandedClass: 'expanded',
onExpandBefore: false,
onExpandAfter: false
};
var settings = $.extend({}, defaults, options);
var isExpanded = false;
var activeLink = false;
var activeExpandedArea = false;
var activeExpandedAreaTop = false;
var activeExpandedAreaHeight = false;
var lastItemInActiveRow = false;
var activeRowChanged = false;
var checkExpandedAreaResize = false;
var $links = $(settings.linksSelector, context);
var $expandingAreas = $(settings.expandingAreaSelector, context);
var $closeButton = $(settings.closeButtonMarkup);
var $spacer = $(settings.spacerMarkup);
var $secondarySpacer = $spacer.clone();
var scrollSectionIntoView = function (top, bottom, duration, callback) {
var animate;
var scroll = 0;
var distance = calculatePageScrollDistance(top, bottom);
var windowScrollDistance = $(window).scrollTop();
var timeLeft;
duration = (typeof duration === 'undefined') ? settings.animationDuration : duration;
timeLeft = duration;
var start = new Date().getTime();
var last = start;
var tick = function() {
timeLeft = Math.max(duration - (new Date() - start), 0);
var x = (timeLeft === 0 || distance === 0) ? 0 : ((new Date() - last) / timeLeft * distance);
var diff = (distance > 0 ? Math.min(x, distance) : Math.max(x, distance));
distance = distance - diff;
scroll += diff;
window.scrollTo(0, windowScrollDistance + scroll);
last = new Date().getTime();
if (last - start <= duration) {
animate = (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
else {
if (typeof callback === 'function') {
callback();
}
}
};
tick();
};
$links.each(function () {
var $this = $(this);
var targetId = $this.attr('href').match(/#([^\?]+)/)[1];
var target = document.getElementById(targetId);
if (target) {
$this.click(function (event) {
var clickedLink = this;
var scrollTargetOffset;
var closeButtonAnimationDelay;
event.preventDefault();
// Is this link already expanded?
if (isExpanded && activeLink === clickedLink) {
$closeButton.click();
}
else {
$links.removeClass(settings.elementActiveClass).filter($this).addClass(settings.elementActiveClass).parent('li').each(function () {
var lastSibling = getLastSiblingInRow(this);
activeRowChanged = lastSibling !== lastItemInActiveRow;
if (activeRowChanged) {
lastItemInActiveRow = lastSibling;
}
if (isExpanded && activeRowChanged) {
$secondarySpacer.height($spacer.height());
$spacer.height(0).replaceWith($secondarySpacer);
}
$(lastItemInActiveRow).after($spacer);
});
if (isExpanded && activeRowChanged) {
$secondarySpacer.animate({height: 0}, settings.animationDuration, function () {
$(this).detach();
});
$closeButton.removeClass(settings.elementActiveClass).hide();
}
scrollTargetOffset = ($secondarySpacer.position().top < $spacer.position().top ? $secondarySpacer.height() : 0);
activeExpandedAreaTop = ($spacer.position().top - scrollTargetOffset);
$expandingAreas.removeClass(settings.elementExpandedClass).hide().filter(target).each(function () {
var $this = $(this);
var autoHeight = $this.height();
var autoOuterHeight = $this.outerHeight();
var initialHeight = (isExpanded && activeExpandedAreaHeight && (activeRowChanged === false)) ? activeExpandedAreaHeight : 0;
stopExpandedAreaMonitor();
$spacer.animate({height: autoHeight + 'px'}, settings.animationDuration);
$this.css({
height: initialHeight + 'px',
position: 'absolute',
left: 0,
top: $spacer.position().top + 'px'
}).show(0, function () {
if (typeof settings.onExpandBefore === 'function') {
settings.onExpandBefore.call(this);
}
}).animate({
height: autoHeight + 'px',
top: activeExpandedAreaTop + 'px'
}, settings.animationDuration, function () {
$this.css({height: 'auto'}).addClass(settings.elementExpandedClass);
activeExpandedAreaHeight = $this.height();
checkExpandedAreaResize = setInterval(function () {
var activeExpandedAreaNewHeight = $this.height();
if (activeExpandedAreaNewHeight !== activeExpandedAreaHeight) {
activeExpandedAreaHeight = activeExpandedAreaNewHeight;
syncExpandedAreaWithSpacer();
}
}, 1000);
if (typeof settings.onExpandAfter === 'function') {
settings.onExpandAfter.call(this);
}
});
var scrollTargetTop = $(clickedLink).offset().top - scrollTargetOffset;
var scrollTargetBottom = $this.offset().top + autoOuterHeight + 20 - scrollTargetOffset;
scrollSectionIntoView(scrollTargetTop, scrollTargetBottom);
});
closeButtonAnimationDelay = (isExpanded && activeRowChanged && ($this.parent().index() > $(activeLink).parent().index())) ? settings.animationDuration : (settings.animationDuration / 4);
$closeButton.css({
position: 'absolute',
right: 0,
top: activeExpandedAreaTop + 'px'
}).delay(closeButtonAnimationDelay).fadeIn(settings.animationDuration, function () {
$(this).addClass(settings.elementActiveClass);
});
activeLink = this;
activeExpandedArea = target;
isExpanded = true;
}
});
}
});
$closeButton.appendTo(context).hide().click(function (event) {
var $activeLink = $(activeLink);
var activeLinkTopOffset = $activeLink.offset().top;
var activeLinkBottomOffset = activeLinkTopOffset + $activeLink.outerHeight();
event.preventDefault();
$links.removeClass(settings.elementActiveClass);
$expandingAreas.slideUp(settings.animationDuration).removeClass(settings.elementExpandedClass);
$closeButton.removeClass('active').hide();
$spacer.animate({height: 0}, settings.animationDuration, function () {
$spacer.detach();
});
scrollSectionIntoView(activeLinkTopOffset, activeLinkBottomOffset);
stopExpandedAreaMonitor();
isExpanded = false;
activeLink = false;
activeExpandedArea = false;
});
var stopExpandedAreaMonitor = function () {
if (checkExpandedAreaResize) {
clearInterval(checkExpandedAreaResize);
}
};
var syncExpandedAreaWithSpacer = function () {
if (activeExpandedArea && isExpanded) {
$spacer.height($(activeExpandedArea).height());
activeExpandedAreaTop = $spacer.position().top;
$closeButton.add(activeExpandedArea).css({top: activeExpandedAreaTop + 'px'});
}
};
var positionSpacer = function () {
var lastSibling;
if (activeLink && lastItemInActiveRow && isExpanded) {
$spacer.detach();
lastSibling = getLastSiblingInRow($(activeLink).parent()[0]);
if (lastItemInActiveRow !== lastSibling) {
console.log(lastSibling);
lastItemInActiveRow = lastSibling;
}
$(lastItemInActiveRow).after($spacer);
}
};
$(window).resize(function () {
if (isExpanded) {
positionSpacer();
syncExpandedAreaWithSpacer();
}
});
};
// Create the jQuery plugin.
$.fn.expandingGrid = function (options) {
return this.each(function () {
expandingGrid(this, options);
});
};
})(jQuery, window, document);
$(document).ready(function () {
$('.expanding-grid').expandingGrid();
});
答案 0 :(得分：1)
使用CSS网格可以很容易地做到这一点。 W3 Schools有一个很好的，易于遵循的示例，可以在here中找到。
以下是使用链接代码的3x4响应式网格：
.grid-container {
max-width: 810px;
max-height: 1050px;
display: grid;
grid-template-columns: auto auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
我已将网格容器设置为允许最大宽度为810 px，最大高度为1050 px，如您在帖子中所指定的。只需在相应的div标签内为每个网格项目添加内容，就可以设置好了！