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> 

私は何をしたいのですが、各アルファベットのグループ別のものです。このよう

：（それが必要かどうか、JavaScript）

http://codepen.io/sol_b/pen/LbxVRrは、残念ながら、私はHTML、CSSのみを変更することはできません。

私は測位、浮動、幅を試しました。コンテンツを表示するかどうかにかかわらず、各アイテムが見出しを取得することはより困難です。

これはCSSでも可能ですか？

コンテンツを持つ各見出しの前に<br>タグを追加することを検討しました。例：私はアイテムの前ではなく、私がするかどうかはわかりませんh2、前にターゲットにする必要があるだろうしかし

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

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

。

ご迷惑をおかけして申し訳ございません。

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

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

Answer 3

あなたがもし

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

ような何かをしたいの非空白H2を持つクラス 'アイテム' で、各要素の前にブレークを追加するにはより複雑になりたい場合は、見出しが付いたアイテムを見つけてコンテナに追加するたびに好きになりコンテナを作成することができます：

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

これらは両方ともテストされていないため、何らかの作業が必要な場合があります。第二のものは、彼らがそうであるように聞こえる、彼らが秩序あると仮定します。