0

我想映射一个 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>
4

1 回答 1

1

我从来没有在 templavoila 中隐藏 div 的问题。这里有一些提示和提示。 INNER意味着您映射的标签将保持不变,只会替换内容。OUTER意味着标签本身也将被删除,并且不会显示在输出中。请注意,根元素以其他方式处理。OUTER 表示该元素将在那里显示,而 INNER 表示该元素将被删除。

在你的情况下,你需要两个 FCE 来获得这个。一个包含容纳所有物品的容器,一个包含物品。

第一个 FCE:

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

第二个FCE:

  • 根元素是<div class="team-member">模式OUTER
  • 为名称、电话添加节点。移动、电子邮件等并映射到相同的 div,所有INNER
于 2013-04-18T07:07:22.700 回答