需要幫助調整與CSS的圖像網格

Question

我正在處理我的投資組合，我無法弄清楚我的網格設置爲100％寬度。我正在嘗試使網格與頂部，底部和側面齊平。你可以看到它的外觀現在的位置：

Current Version

然後這是我試圖使它看起來方式：

Mockup Version

這裏的原代碼

/** 
 
* jQuery Expanding Grid plugin. 
 
* 
 
* By Dan Boulet - https://danboulet.com 
 
*/ 
 
(function ($, window, document) { 
 

 
// Enable strict mode 
 
"use strict"; 
 

 
/** 
 
* Return the last element in the current row of a grid layout. 
 
*/ 
 
var getLastSiblingInRow = function (element) { 
 
\t var candidate = element, 
 
\t \t \t elementTop = element.offsetTop; 
 

 
\t // Loop through the element’s next siblings and look for the first one which 
 
\t // is positioned further down the page. 
 
\t while (candidate.nextElementSibling !== null) { 
 
\t \t if (candidate.nextElementSibling.offsetTop > elementTop) { 
 
\t \t \t return candidate; 
 
\t \t } 
 
\t \t candidate = candidate.nextElementSibling; 
 
\t } 
 
\t return candidate; 
 
}; 
 

 
/** 
 
* Calculate the distance that we need to scroll the page to bring a 
 
* section, defined as the area between the top and bottom, into view. 
 
*/ 
 
var calculatePageScrollDistance = function (top, bottom) { 
 
\t var windowScrollDistance = $(window).scrollTop(), 
 
\t \t \t windowHeight = $(window).height(), 
 
\t \t \t scrollDistanceToTop, 
 
\t \t \t scrollDistanceToBottom; 
 

 
\t // Scroll to the top of the section if the we are already scrolled past it. 
 
\t if (windowScrollDistance >= top) { 
 
\t \t return top - windowScrollDistance; 
 
\t } 
 
\t // Do nothing if there is enough space to show the section without having to scroll. 
 
\t else if ((windowScrollDistance + windowHeight) >= bottom) { 
 
\t \t return 0; 
 
\t } 
 
\t else { 
 
\t \t // Find the maximum distance we can scroll without passing the top of the section. 
 
\t \t scrollDistanceToTop = top - windowScrollDistance; 
 
\t \t // Find the distance we need to scroll to reveal the entire section. 
 
\t \t scrollDistanceToBottom = bottom - (windowScrollDistance + windowHeight); 
 

 
\t \t return Math.min(scrollDistanceToTop, scrollDistanceToBottom); 
 
\t } 
 
}; 
 

 
/** 
 
* Create the expanding preview grid. 
 
*/ 
 
var expandingGrid = function (context, options) { 
 
\t var defaults = { 
 
\t \t animationDuration: 250, 
 
\t \t linksSelector: '.links a', 
 
\t \t expandingAreaSelector: '.expanding-container', 
 
\t \t closeButtonMarkup: '<a href="#" class="close-button">Close</a>', 
 
\t \t spacerMarkup: '<span class="spacer" aria-hidden="true"/>', 
 
\t \t elementActiveClass: 'active', 
 
\t \t elementExpandedClass: 'expanded', 
 
\t \t onExpandBefore: false, 
 
\t \t onExpandAfter: false 
 
\t }; 
 

 
\t var settings = $.extend({}, defaults, options); 
 

 
\t var isExpanded = false; 
 
\t var activeLink = false; 
 
\t var activeExpandedArea = false; 
 
\t var activeExpandedAreaTop = false; 
 
\t var activeExpandedAreaHeight = false; 
 
\t var lastItemInActiveRow = false; 
 
\t var activeRowChanged = false; 
 
\t var checkExpandedAreaResize = false; 
 
\t var $links = $(settings.linksSelector, context); 
 
\t var $expandingAreas = $(settings.expandingAreaSelector, context); 
 
\t var $closeButton = $(settings.closeButtonMarkup); 
 
\t var $spacer = $(settings.spacerMarkup); 
 
\t var $secondarySpacer = $spacer.clone(); 
 

 
\t /** 
 
\t * Scroll a section of the page into view, using animation. 
 
\t */ 
 
\t var scrollSectionIntoView = function (top, bottom, duration, callback) { 
 
\t \t var animate; 
 
\t \t var scroll = 0; 
 
\t \t var distance = calculatePageScrollDistance(top, bottom); 
 
\t \t var windowScrollDistance = $(window).scrollTop(); 
 
\t \t var timeLeft; 
 

 
\t \t // Set default duration. 
 
\t \t duration = (typeof duration === 'undefined') ? settings.animationDuration : duration; 
 
\t \t timeLeft = duration; 
 

 
\t \t var start = new Date().getTime(); 
 
\t \t var last = start; 
 
\t \t var tick = function() { 
 
\t \t \t timeLeft = Math.max(duration - (new Date() - start), 0); 
 

 
\t \t \t var x = (timeLeft === 0 || distance === 0) ? 0 : ((new Date() - last)/timeLeft * distance); 
 
\t \t \t var diff = (distance > 0 ? Math.min(x, distance) : Math.max(x, distance)); 
 
\t \t \t distance = distance - diff; 
 
\t \t \t scroll += diff; 
 
\t \t \t window.scrollTo(0, windowScrollDistance + scroll); 
 

 
\t \t \t last = new Date().getTime(); 
 

 
\t \t \t if (last - start <= duration) { 
 
\t \t \t \t animate = (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); 
 
\t \t \t } 
 
\t \t \t else { 
 
\t \t \t \t if (typeof callback === 'function') { 
 
\t \t \t \t \t callback(); 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }; 
 

 
\t \t tick(); 
 
\t }; 
 

 
\t // Process the links. 
 
\t $links.each(function() { 
 
\t \t var $this = $(this); 
 
\t \t var targetId = $this.attr('href').match(/#([^\?]+)/)[1]; 
 
\t \t var target = document.getElementById(targetId); 
 

 
\t \t if (target) { 
 
\t \t \t $this.click(function (event) { 
 
\t \t \t \t var clickedLink = this; 
 
\t \t \t \t var scrollTargetOffset; 
 
\t \t \t \t var closeButtonAnimationDelay; 
 

 
\t \t \t \t event.preventDefault(); 
 

 
\t \t \t \t // Is this link already expanded? 
 
\t \t \t \t if (isExpanded && activeLink === clickedLink) { 
 
\t \t \t \t \t // Close it. 
 
\t \t \t \t \t $closeButton.click(); 
 
\t \t \t \t } 
 
\t \t \t \t // Otherwise, expand it. 
 
\t \t \t \t else { 
 
\t \t \t \t \t $links.removeClass(settings.elementActiveClass).filter($this).addClass(settings.elementActiveClass).parent('li').each(function() { 
 
\t \t \t \t \t \t var lastSibling = getLastSiblingInRow(this); 
 
\t \t \t \t \t \t activeRowChanged = lastSibling !== lastItemInActiveRow; 
 
\t \t \t \t \t \t if (activeRowChanged) { 
 
\t \t \t \t \t \t \t lastItemInActiveRow = lastSibling; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t // If we are changing rows, replace spacer with secondary spacer. 
 
\t \t \t \t \t \t if (isExpanded && activeRowChanged) { 
 
\t \t \t \t \t \t \t $secondarySpacer.height($spacer.height()); 
 
\t \t \t \t \t \t \t $spacer.height(0).replaceWith($secondarySpacer); 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t $(lastItemInActiveRow).after($spacer); 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t if (isExpanded && activeRowChanged) { 
 
\t \t \t \t \t \t $secondarySpacer.animate({height: 0}, settings.animationDuration, function() { 
 
\t \t \t \t \t \t \t $(this).detach(); 
 
\t \t \t \t \t \t }); 
 
\t \t \t \t \t \t $closeButton.removeClass(settings.elementActiveClass).hide(); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t scrollTargetOffset = ($secondarySpacer.position().top < $spacer.position().top ? $secondarySpacer.height() : 0); 
 
\t \t \t \t \t activeExpandedAreaTop = ($spacer.position().top - scrollTargetOffset); 
 
\t \t \t \t \t $expandingAreas.removeClass(settings.elementExpandedClass).hide().filter(target).each(function() { 
 
\t \t \t \t \t \t \t var $this = $(this); 
 
\t \t \t \t \t \t \t var autoHeight = $this.height(); 
 
\t \t \t \t \t \t \t var autoOuterHeight = $this.outerHeight(); 
 
\t \t \t \t \t \t \t var initialHeight = (isExpanded && activeExpandedAreaHeight && (activeRowChanged === false)) ? activeExpandedAreaHeight : 0; 
 

 
\t \t \t \t \t \t \t stopExpandedAreaMonitor(); 
 

 
\t \t \t \t \t \t \t $spacer.animate({height: autoHeight + 'px'}, settings.animationDuration); 
 

 
\t \t \t \t \t \t \t $this.css({ 
 
\t \t \t \t \t \t \t \t height: initialHeight + 'px', 
 
\t \t \t \t \t \t \t \t position: 'absolute', 
 
\t \t \t \t \t \t \t \t left: 0, 
 
\t \t \t \t \t \t \t \t top: $spacer.position().top + 'px' 
 
\t \t \t \t \t \t \t }).show(0, function() { 
 
\t \t \t \t \t \t \t \t // Callback. 
 
\t \t \t \t \t \t \t \t if (typeof settings.onExpandBefore === 'function') { 
 
\t \t \t \t \t \t \t \t \t settings.onExpandBefore.call(this); 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }).animate({ 
 
\t \t \t \t \t \t \t \t height: autoHeight + 'px', 
 
\t \t \t \t \t \t \t \t top: activeExpandedAreaTop + 'px' 
 
\t \t \t \t \t \t \t }, settings.animationDuration, function() { 
 
\t \t \t \t \t \t \t \t $this.css({height: 'auto'}).addClass(settings.elementExpandedClass); 
 

 
\t \t \t \t \t \t \t \t // Set a timer to monitor changes to expanded area’s height. 
 
\t \t \t \t \t \t \t \t activeExpandedAreaHeight = $this.height(); 
 
\t \t \t \t \t \t \t \t checkExpandedAreaResize = setInterval(function() { 
 
\t \t \t \t \t \t \t \t \t var activeExpandedAreaNewHeight = $this.height(); 
 
\t \t \t \t \t \t \t \t \t if (activeExpandedAreaNewHeight !== activeExpandedAreaHeight) { 
 
\t \t \t \t \t \t \t \t \t \t activeExpandedAreaHeight = activeExpandedAreaNewHeight; 
 
\t \t \t \t \t \t \t \t \t \t syncExpandedAreaWithSpacer(); 
 
\t \t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t \t }, 1000); 
 

 
\t \t \t \t \t \t \t \t // Callback. 
 
\t \t \t \t \t \t \t \t if (typeof settings.onExpandAfter === 'function') { 
 
\t \t \t \t \t \t \t \t \t settings.onExpandAfter.call(this); 
 
\t \t \t \t \t \t \t \t } 
 
\t \t \t \t \t \t \t }); 
 

 
\t \t \t \t \t \t \t // Scroll the page to bring the active link and preview into view. 
 
\t \t \t \t \t \t \t var scrollTargetTop = $(clickedLink).offset().top - scrollTargetOffset; 
 
\t \t \t \t \t \t \t var scrollTargetBottom = $this.offset().top + autoOuterHeight + 20 - scrollTargetOffset; 
 
\t \t \t \t \t \t \t scrollSectionIntoView(scrollTargetTop, scrollTargetBottom); 
 
\t \t \t \t \t \t }); 
 

 
\t \t \t \t \t // Activate close button. 
 
\t \t \t \t \t closeButtonAnimationDelay = (isExpanded && activeRowChanged && ($this.parent().index() > $(activeLink).parent().index())) ? settings.animationDuration : (settings.animationDuration/4); 
 
\t \t \t \t \t $closeButton.css({ 
 
\t \t \t \t \t \t \t position: 'absolute', 
 
\t \t \t \t \t \t \t right: 0, 
 
\t \t \t \t \t \t \t top: activeExpandedAreaTop + 'px' 
 
\t \t \t \t \t \t }).delay(closeButtonAnimationDelay).fadeIn(settings.animationDuration, function() { 
 
\t \t \t \t \t \t \t $(this).addClass(settings.elementActiveClass); 
 
\t \t \t \t \t \t }); 
 

 
\t \t \t \t \t // Set global variables. 
 
\t \t \t \t \t activeLink = this; 
 
\t \t \t \t \t activeExpandedArea = target; 
 
\t \t \t \t \t isExpanded = true; 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } 
 
\t }); 
 

 
\t // Process the close button. 
 
\t $closeButton.appendTo(context).hide().click(function (event) { 
 
\t \t var $activeLink = $(activeLink); 
 
\t \t var activeLinkTopOffset = $activeLink.offset().top; 
 
\t \t var activeLinkBottomOffset = activeLinkTopOffset + $activeLink.outerHeight(); 
 

 
\t \t event.preventDefault(); 
 

 
\t \t // DOM manipulation and animations. 
 
\t \t $links.removeClass(settings.elementActiveClass); 
 
\t \t $expandingAreas.slideUp(settings.animationDuration).removeClass(settings.elementExpandedClass); 
 
\t \t $closeButton.removeClass('active').hide(); 
 
\t \t $spacer.animate({height: 0}, settings.animationDuration, function() { 
 
\t \t \t $spacer.detach(); 
 
\t \t }); 
 

 
\t \t // Scroll the page to bring the active link into view. 
 
\t \t scrollSectionIntoView(activeLinkTopOffset, activeLinkBottomOffset); 
 

 
\t \t stopExpandedAreaMonitor(); 
 

 
\t \t // Reset global variables. 
 
\t \t isExpanded = false; 
 
\t \t activeLink = false; 
 
\t \t activeExpandedArea = false; 
 
\t }); 
 

 
\t /** 
 
\t * Stop monitoring size of expanded area. 
 
\t */ 
 
\t var stopExpandedAreaMonitor = function() { 
 
\t \t if (checkExpandedAreaResize) { 
 
\t \t \t clearInterval(checkExpandedAreaResize); 
 
\t \t } 
 
\t }; 
 

 
\t /** 
 
\t * Match preview and spacer in height and position. 
 
\t */ 
 
\t var syncExpandedAreaWithSpacer = function() { 
 
\t \t if (activeExpandedArea && isExpanded) { 
 
\t \t \t $spacer.height($(activeExpandedArea).height()); 
 
\t \t \t activeExpandedAreaTop = $spacer.position().top; 
 
\t \t \t $closeButton.add(activeExpandedArea).css({top: activeExpandedAreaTop + 'px'}); 
 
\t \t } 
 
\t }; 
 

 
\t /** 
 
\t * Place spacer in proper position within grid. 
 
\t */ 
 
\t var positionSpacer = function() { 
 
\t \t var lastSibling; 
 
\t \t if (activeLink && lastItemInActiveRow && isExpanded) { 
 
\t \t \t // Remove spacer. 
 
\t \t \t $spacer.detach(); 
 
\t \t \t lastSibling = getLastSiblingInRow($(activeLink).parent()[0]); 
 
\t \t \t // Reposition spacer, if necessary. 
 
\t \t \t if (lastItemInActiveRow !== lastSibling) { 
 
\t \t \t \t console.log(lastSibling); 
 
\t \t \t \t lastItemInActiveRow = lastSibling; 
 
\t \t \t } 
 
\t \t \t // Restore spacer. 
 
\t \t \t $(lastItemInActiveRow).after($spacer); 
 
\t \t } 
 
\t }; 
 

 
\t // React to window resize. 
 
\t $(window).resize(function() { 
 
\t \t if (isExpanded) { 
 
\t \t \t positionSpacer(); 
 
\t \t \t syncExpandedAreaWithSpacer(); 
 
\t \t } 
 
\t }); 
 
}; 
 

 
// Create the jQuery plugin. 
 
$.fn.expandingGrid = function (options) { 
 
\t return this.each(function() { 
 
\t \t expandingGrid(this, options); 
 
\t }); 
 
}; 
 

 
})(jQuery, window, document); 
 

 
$(document).ready(function() { 
 
\t $('.expanding-grid').expandingGrid(); 
 
});

// Basic styles. 
 

 
body { 
 
\t background-color: #fff; 
 
\t color: #333; 
 
\t font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
 
\t font-size: 100%; 
 
\t font-weight: 400; 
 
\t line-height: 1.5; 
 
\t margin: 0 auto; 
 
\t max-width: 80em; 
 
\t overflow-y: scroll; // Permanent scroll bar. 
 
\t padding: 2em; 
 
} 
 

 
// Styles for our expanding grid. 
 

 
$image-bg-color: orange; 
 
$expanded-area-bg-color: #888; 
 

 
.expanding-grid { 
 
\t position: relative; 
 
\t width: 100%; 
 
\t .links { 
 
\t \t display: block; 
 
\t \t margin: 0 -1em; 
 
\t \t overflow: hidden; // Clearfix. 
 
\t \t padding: 1em 0; 
 
\t \t > li { 
 
\t \t \t box-sizing: border-box; 
 
\t \t \t float: left; 
 
\t \t \t padding: 1em; 
 
\t \t \t a { 
 
\t \t \t \t background: $image-bg-color; 
 
\t \t \t \t color: #fff; 
 
\t \t \t \t display: block; 
 
\t \t \t \t font-size: 2em; 
 
\t \t \t \t line-height: 1; 
 
\t \t \t \t padding: 25% 1em; 
 
\t \t \t \t position: relative; 
 
\t \t \t \t text-align: center; 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t -webkit-font-smoothing: antialiased; 
 
\t \t \t \t -moz-osx-font-smoothing: grayscale; 
 
\t \t \t \t &:hover { 
 
\t \t \t \t \t background: lighten($image-bg-color, 10%); 
 
\t \t \t \t } 
 
\t \t \t \t &.active { 
 
\t \t \t \t \t background: darken($image-bg-color, 10%); 
 
\t \t \t \t \t &:after { 
 
\t \t \t \t \t \t background-color: transparent; 
 
\t \t \t \t \t \t border-bottom: 0.375em solid $expanded-area-bg-color; 
 
\t \t \t \t \t \t border-left: 0.375em solid transparent; 
 
\t \t \t \t \t \t border-right: 0.375em solid transparent; 
 
\t \t \t \t \t \t bottom: -0.5em; 
 
\t \t \t \t \t \t content: ''; 
 
\t \t \t \t \t \t height: 0; 
 
\t \t \t \t \t \t left: 50%; 
 
\t \t \t \t \t \t margin-left: -0.375em; 
 
\t \t \t \t \t \t position: absolute; 
 
\t \t \t \t \t \t width: 0; 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t @media only screen and (max-width: 39.99em) { 
 
\t \t \t \t width: 50%; 
 
\t \t \t \t &:nth-of-type(2n+1) { 
 
\t \t \t \t \t clear: left; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t @media only screen and (min-width: 40em) and (max-width: 59.99em) { 
 
\t \t \t \t width: percentage(1/3); 
 
\t \t \t \t &:nth-of-type(3n+1) { 
 
\t \t \t \t \t clear: left; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t @media only screen and (min-width: 60em) { 
 
\t \t \t \t width: percentage(1/4); 
 
\t \t \t \t &:nth-of-type(4n+1) { 
 
\t \t \t \t \t clear: left; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
\t } 
 

 
\t .spacer { 
 
\t \t background-color: $expanded-area-bg-color; 
 
\t \t clear: both; 
 
\t \t display: block; 
 
\t \t margin: 0 1em; 
 
\t } 
 

 
\t .expanding-container { 
 
\t \t clear: both; 
 
\t \t display: none; 
 
\t \t overflow: hidden; 
 
\t \t width: 100%; 
 
\t \t &.expanded, 
 
\t \t &:target { 
 
\t \t \t display: block; 
 
\t \t } 
 
\t } 
 

 
\t .hentry { 
 
\t \t background: $expanded-area-bg-color; 
 
\t \t box-sizing: border-box; 
 
\t \t clear: both; 
 
\t \t color: #fff; 
 
\t \t min-height: 4em; 
 
\t \t overflow: hidden; // Clearfix. 
 
\t \t padding: 2em; 
 
\t \t width: 100%; 
 
\t \t -webkit-font-smoothing: antialiased; 
 
\t \t -moz-osx-font-smoothing: grayscale; 
 
\t \t .entry-image { 
 
\t \t \t box-sizing: border-box; 
 
\t \t \t float: right; 
 
\t \t \t margin-left: 1em; 
 
\t \t \t padding: 0.25em 0 0.52em 1em; 
 
\t \t \t text-align: center; 
 
\t \t \t width: 50%; 
 
\t \t } 
 
\t \t .entry-title { 
 
\t \t \t font-size: 1.5em; 
 
\t \t } 
 
\t } 
 

 
\t .close-button { 
 
\t \t background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNLjcuN2wxOCAxOG0tMTggMGwxOC0xOCIvPjwvc3ZnPg==) no-repeat scroll 50% 50% transparent; 
 
\t \t color: #fff; 
 
\t \t display: inline-block; 
 
\t \t height: 20px; 
 
\t \t line-height: 1; 
 
\t \t overflow: hidden; 
 
\t \t padding: 1.5em 2em; 
 
\t \t text-decoration: none; 
 
\t \t text-indent: 5em; 
 
\t \t white-space: nowrap; 
 
\t \t width: 20px; 
 
\t \t will-change: opacity; 
 
\t \t z-index: 5; 
 
\t \t -webkit-font-smoothing: antialiased; 
 
\t \t -moz-osx-font-smoothing: grayscale; 
 
\t \t &.active { 
 
\t \t \t transition: opacity 0.2s; 
 
\t \t } 
 
\t \t &:hover { 
 
\t \t \t opacity: 0.5; 
 
\t \t } 
 
\t } 
 
} 
 

 
// Style our simulated images. 
 

 
.img-placeholder { 
 
\t background: $image-bg-color; 
 
\t color: #fff; 
 
\t font-size: 4em; 
 
\t font-weight: 300; 
 
\t line-height: 1; 
 
\t padding: 25% 0.25em; 
 
\t -webkit-font-smoothing: antialiased; 
 
\t -moz-osx-font-smoothing: grayscale; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 

 
<div class="expanding-grid"> 
 
\t 
 
\t <ul class="links"> 
 
\t \t <li><a href="#section1">1</a></li> 
 
\t \t <li><a href="#section2">2</a></li> 
 
\t \t <li><a href="#section3">3</a></li> 
 
\t \t <li><a href="#section4">4</a></li> 
 
\t \t <li><a href="#section5">5</a></li> 
 
\t \t <li><a href="#section6">6</a></li> 
 
\t \t <li><a href="#section7">7</a></li> 
 
\t \t <li><a href="#section8">8</a></li> 
 
\t \t <li><a href="#section9">9</a></li> 
 
\t \t <li><a href="#section10">10</a></li> 
 
\t \t <li><a href="#section11">11</a></li> 
 
\t \t <li><a href="#section12">12</a></li> 
 
\t </ul> 
 

 
\t <div id="section1" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">1</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section2" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">2</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section3" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">3</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section4" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">4</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section5" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">5</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section6" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">6</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section7" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">7</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section8" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">8</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 
\t 
 
\t <div id="section9" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">9</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section10" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">10</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section11" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">11</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 

 
\t <div id="section12" class="expanding-container"> 
 
\t \t <article class="hentry"> 
 
\t \t \t <h1 class="entry-title">Title</h1> 
 
\t \t \t <div class="entry-image"><div class="img-placeholder">12</div></div> 
 
\t \t \t <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> 
 
\t \t </article> 
 
\t </div> 
 
</div>

的片段並不因某種原因在這裏工作，但你可以在這裏的行動看到它（無空格）： Codepen

Answer 1

不知道我完全理解你，但這裏是答案。 1注意，我儘量使用你的設置。如果是我的項目，我會選擇行和這樣的： 使您的內容100％和100％的高度，你必須讓身體有0 padding，並沒有margin，也100％width：

body { 
    background-color: #fff; 
    color: #333; 
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif; 
    font-size: 100%; 
    font-weight: 400; 
    line-height: 1.5; 
    width: 100%; 
    overflow-y: scroll; // Permanent scroll bar. 
} 

現在我們需要使網格的第一行有0 top padding，並且每個第一個元素0 left padding和最後一個元素有0 right padding。我這樣做是使用:nth-child僞選擇：

.links { 
    display: block; 
    overflow: hidden; // Clearfix. 

    > li { 
     box-sizing: border-box; 
     float: left; 
     padding: 1em; 

     &:nth-child(-n+4){ 
      padding-top: 0; 
     } 
     &:nth-child(4){ 
       padding-right: 0; 
      } 
     &:nth-child(4n+1) { /* or 4n+1 */ 
      padding-left: 0; 
     background-color: green; 
    } 
    &:nth-child(4n+4) { /* or 4n+1 */ 
      padding-right: 0; 
     background-color: pink; 
    } 

這裏是我做了筆：My pen

有一個問題，但在中間的一個元素（你每行的第二和第三要素）由於您使用％來調整大小，因此大小不同。

我現在沒有更多的時間去做這件事，但我希望我能引導你進入一個解決方案。