FCE をマップしたいのですが、私の構造は次のようになります。
| ROOT (div INNER)
--|EL
--|SC (div INNER)
----|CO (div OUTER)
------|EL (div INNER)
------|EL (div INNER)
------|EL (div INNER)
問題1:
コンテナをセクション要素に OUTER または INNER でマップしても、何も変わりません。私は常に<div>
フロントエンドで取得します。<div class="item">
この divにマップすると、フロントエンドで消えます。したがって、フロントエンド出力div
に保持する追加を追加しました。<div class="item">
<div> <!--root -->
<div class="wrapper">
<h1>heading</h1> <!--element before section -->
<div class="another-wrapper-element"> <!-- section -->
<div> <!-- container: additional element **(problem no. 1)** -->
<div class="item">
<div class="heading"> <!-- element 1 -->
<div class="description"> <!-- element 2 -->
</div>
<div class="clearer"></div> <!-- **problem no.2** -->
問題2:
コンテナの下のセクションにあるすべての要素がフロントエンドに表示されなくなります。この場合、<div class="clearer"></div>
が欠落しています。
フロントエンドで div が消えないようにするにはどうすればよいですか? これらを正しくマッピングするにはどうすればよいですか?
完全な HTML コード:
<!doctype html>
<!-- FCE Team Container -->
<div>
<div class="team-container-wrapper">
<h2>Heading</h2>
<div class="team-container">
<div>
<div class="team-member">
<div class="team-member-left">
<img src="img/some-picture.jpg" width="158" height="218" alt="" />
</div>
<div class="team-member-right">
<div class="team-member-name">some name</div>
<div class="team-member-tel">T: <span class="team-member-tel-content">012323445</span></div>
<div class="team-member-mobile">M: <span class="team-member-mobile-content">1232143241</span></div>
<div class="team-member-email">E: <span class="team-member-email-content"><a href="mailto:email@world.com">email@world.com</a></span></div>
<div class="team-member-history">
<p>
Some text:<br />
<span class="team-member-history-content">info</span>
</p>
</div>
</div>
<div class="clearer"></div>
</div>
<div class="clearer"></div>
<div class="team-container-bottom"><img src="img/team-container-bottom.png" width="50" height="9" alt="" /></div>
</div>
</div>
</div>
</div>