我想映射一个 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** -->
问题二:
容器下方部分中的所有元素都会在前端消失。在这种情况下,<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>