我可以使用 CSS 来更改这个 HTML 结构吗？

Question

我有一个非常严格的 html 结构，它显示图片库。图像按字母顺序分组。

演示：http://codepen.io/sol_b/pen/aBpbxz

每个面板的 HTML：

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

我想做的是将每个字母组分开。

像这样：http://codepen.io/sol_b/pen/LbxVRr

很遗憾，我无法更改 HTML，只能更改 CSS（或 JavaScript，如果有必要的话）。

我尝试过定位、浮动、宽度。更困难的是每个项目都有一个标题，无论它是否显示内容。

这甚至可以通过 CSS 实现吗？

我考虑过的一件事是在每个包含内容的标题之前添加一个<br> 标签。示例：

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

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

但是我需要在项目之前定位，而不是在 h2 之前，我不知道该怎么做。

非常感谢任何帮助。

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

要在每个具有非空白 h2 的类 'item' 的元素之前添加一个中断，您可以执行类似的操作

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);
}

如果你想变得更复杂，你可以变得更花哨并在每次找到带有标题的项目并将它们添加到容器时创建一个容器：

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);
}

这些都未经测试，因此可能需要一些工作。第二个也假设它们是有序的，听起来它们是。

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);
  }
}