Question

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

每个小组的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

要在每个元素之前使用类＆＃39;项目＆＃39;添加休息符。你有一个非空白的h2，你可以做像

这样的事情

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

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

3 个答案: