Question

我想映射一个FCE，我的结构如下：

| ROOT (div INNER)
 --|EL
 --|SC (div INNER)
 ----|CO (div OUTER)
 ------|EL (div INNER)
 ------|EL (div INNER)
 ------|EL (div INNER)

问题1：

如果我在我的section元素上用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>

Answer 1

我从来没有在templavoila隐藏div的问题。这里有一些提示和提示。 INNER表示您映射的标记不会受到影响，只会替换该标记。 OUTER表示标签本身也将被删除，并且不会显示在输出中。请注意，根元素以其他方式处理。 OUTER表示元素将显示为双，INNER表示元素将被删除。

在您的情况下，您需要两个FCE才能获得此功能。一个包含容纳所有物品的容器，一个容器包含该物品。

第一个FCE：

根元素是与<div class="team-container-wrapper">映射的第一个OUTER，因为您希望该元素位于前端
创建节点标题并映射到H2
创建节点“conent元素的容器”并映射到<div class="team-container">模式为INNER，因为您希望输出中的标记

第二次FCE：

根元素为<div class="team-member">模式OUTER
为name，tel添加节点。移动电子邮件等等，并映射到同一个div，所有INNER

Templavoila：部分和容器正在移除我的div

1 个答案: