我可以使用CSS更改此HTML结构吗？

Question

I have a very rigid html structure which is displaying a gallery of images. Images are grouped alphabetically.

Demo: http://codepen.io/sol_b/pen/aBpbxz

HTML for each panel:

<div class="item">
      <h2>A</h2>
      <div class="image">
          <img src="image.jpg">
      </div>
</div>

What I'd like to do is separate each alphabetical group.

Like this: http://codepen.io/sol_b/pen/LbxVRr

Unfortunately I can't alter the HTML, only CSS (or JavaScript if that's necessary).

I've tried positioning, floats, widths. What makes it more difficult is that each item gets a heading, whether it displays content or not.

Is this even possible with CSS?

One thing I considered was adding a <br> tag before each heading that has content. Example:

var breakTag = document.createElement('br');
var element = document.getElementsByTagName('h2');

if(element.innerHTML == ""){
  element.insertBefore(breakTag);
} 

However I would need to target before the item, and not before the h2 , which I'm not sure how to do.

Any help much appreciated.

Answer 1

 var breakTag = document.createElement('br'), elems = document.getElementsByTagName('h2'), parentDiv = document.getElementsByClassName('content')[0]; for (var i = 0; i < elems.length; i++) { if (elems[i].innerText !== '') { parentDiv.insertBefore(breakTag.cloneNode(true), elems[i].parentNode); } } 

 .wrapper { width: 800px; margin: 0 auto; } h2 { font-size: 16px; font-family: sans-serif; } br { display: block; content: ""; } .item { display: inline-block; width: 33%; position: relative; } .image { width: 240px; height: 120px; position: relative; } .name { position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; text-align: center; background-color: #1a1a1a; color: #fff; font-size: 16px; font-weight: bold; opacity: 0; transition: 0.1s ease-in-out; width: 240px; height: 120px; display: table; box-sizing: border-box; padding: 20px; } .name:hover { opacity: 1; } .name span { display: table-cell; vertical-align: middle; cursor: default; font-family: sans-serif; letter-spacing: 3px; } 

 <div class="wrapper"> <div class="content"> <div class="item"> <h2>A</h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> <div class="item"> <h2></h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> <div class="item"> <h2></h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> <div class="item"> <h2></h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> <div class="item"> <h2>B</h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> <div class="item"> <h2></h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> <div class="item"> <h2>C</h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> <div class="item"> <h2></h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> <div class="item"> <h2>D</h2> <div class="image"> <img src="http://placehold.it/240x120"> <div class="name"> <span>Title</span> </div> </div> </div> </div> </div> 

Answer 2

To add a break before each element with the class 'item' that has a non-blank h2 you'd do something like

var sections = document.getElementsByClassName('item');
for (var section of sections) {
    let heading = section.getElementsByTagName('h2')[0];
    if (!heading || !heading.innerHtml) { continue; }
    section.parent.insertBefore(document.createElement('br'), section);
}

If you want to get more complicated, you could get fancier and create a container every time you find an item with a heading and add them to the container:

var sections = document.getElementsByClassName('item');
var currentContainer = null;
for (var section of sections) {
    let heading = section.getElementsByTagName('h2')[0];
    if (heading && heading.innerHtml) { 
        currentContainer = document.createElement('div');
        currentContainer.className = 'generated-section';
        section.parent.insertBefore(currentContainer, section);
    }
    section.parent.remove(section);
    currentContainer.appendChild(section);
}

Those are both untested, so they might require some work. The second also assumes they're in order, which it sounds like they are.

Answer 3

var breakTag = document.createElement('br');
var elements = document.getElementsByTagName('h2');

for(var element of elements){
  if(element.innerHTML){
      element.parentNode.parentNode.insertBefore(breakTag.cloneNode(true), element.parentNode);
  }
}