Question

我正在尝试使用：nth-child（偶数）技术在我的页面上的每个其他文章/项目中选择我的图像，并最终将图像浮动到与其他文本相对的偶数文章中。< / p>

我正在使用Joomla 3和K2，我知道它不会有所作为，但会解释臃肿的HTML和许多div都相互嵌套。

以下是我的代码段：

HTML（2篇文章/项目的片段）：

    <!-- Start K2 Item Layout -->
    <div class="catItemView groupLeading">

    <!-- Plugins: BeforeDisplay -->

    <!-- K2 Plugins: K2BeforeDisplay -->

    <div class="catItemHeader">

          <!-- Item title -->
      <h3 class="catItemTitle">

                Copy of A Little Bit About Us...        
              </h3>

          </div>

  <!-- Plugins: AfterDisplayTitle -->

  <!-- K2 Plugins: K2AfterDisplayTitle -->


  <div class="catItemBody">

      <!-- Plugins: BeforeDisplayContent -->

      <!-- K2 Plugins: K2BeforeDisplayContent -->

          <!-- Item Image -->
      <div class="catItemImageBlock">
          <span class="catItemImage">
            <a href="/index.php/about/cni-solutions-overview/51-a-little-bit-about-us" title="Copy of A Little Bit About Us...">
                <img src="/media/k2/items/cache/eb6c7c01c4e98e1f2578f9959463b973_L.jpg" alt="Copy of A Little Bit About Us..." style="width:600px; height:auto;" />
            </a>
          </span>
      </div>

          <!-- Item introtext -->
      <div class="catItemIntroText">
        <h3>Experience, business continuity, quality support</h3>
    <p>Our team at CNi Solutions has over 18 years’ IT experience with a proven track record of success supporting small and medium sized businesses across the North West acting as a client’s IT department, or supplementing an existing IT function.</p>
    <p>We believe in helping our clients to improve business performance by leveraging well managed IT solutions, backed up by expert IT support services providing highly technical installation, virtualisation and disaster recovery solutions leading to improved technical performances.</p>
    <p>Our aim at CNi Solutions is to create long-term partnerships with our clients, maintaining value for money solutions through a combination of high quality support, expert IT project delivery and applicable strategic advice.</p>    </div>

        <div class="clr"></div>


    <div class="clr"></div>    



      <!-- Plugins: AfterDisplayContent -->

      <!-- K2 Plugins: K2AfterDisplayContent -->

      <div class="clr"></div>
  </div>


    <div class="clr"></div>


  <!-- Plugins: AfterDisplay -->

  <!-- K2 Plugins: K2AfterDisplay -->

    <div class="clr"></div>
</div>
<!-- End K2 Item Layout -->

            </div>
                        <div class="clr"></div>         

            <div class="itemContainer itemContainerLast" style="width:100.0%;">

<link rel="stylesheet" href="/templates/cni_solutions_purity_iii/html/com_k2/templates/about/about_style.css" type="text/css" />

<!-- Start K2 Item Layout -->
<div class="catItemView groupLeading">

    <!-- Plugins: BeforeDisplay -->

    <!-- K2 Plugins: K2BeforeDisplay -->

    <div class="catItemHeader">

          <!-- Item title -->
      <h3 class="catItemTitle">

                Copy of Here to Support You...      
              </h3>

          </div>

  <!-- Plugins: AfterDisplayTitle -->

  <!-- K2 Plugins: K2AfterDisplayTitle -->


  <div class="catItemBody">

      <!-- Plugins: BeforeDisplayContent -->

      <!-- K2 Plugins: K2BeforeDisplayContent -->

          <!-- Item Image -->
      <div class="catItemImageBlock">
          <span class="catItemImage">
            <a href="/index.php/about/cni-solutions-overview/50-here-to-support-you" title="Copy of Here to Support You...">
                <img src="/media/k2/items/cache/a522a6005d1cb428ea34ef1769cd7452_L.jpg" alt="Copy of Here to Support You..." style="width:600px; height:auto;" />
            </a>
          </span>
      </div>

          <!-- Item introtext -->
      <div class="catItemIntroText">
        <h3>Supporting your Computer Network Infrastructure</h3>
    <p>At CNi Solutions we believe that your Computer Network Infrastructure should be at the very heart of your business, but should not dictate the beat. CNi Solutions has been developed to provide you with full IT support, allowing you to focus on what is important - Developing and growing your business without the interruptions of an unsupported IT Infrastructure.</p>
    <p>We understand that your Computer Network Infrastructure needs to be tailored to suit your needs, whether you are a start-up business with one computer, looking for someone to call offering support and advice on your anti-virus and backup needs or a large company with more than one office looking for daily support and guidance on your growing IT demands.</p>    </div>

        <div class="clr"></div>


      <!-- Plugins: AfterDisplayContent -->

      <!-- K2 Plugins: K2AfterDisplayContent -->

      <div class="clr"></div>
  </div>

等等每篇文章/项目......

CSS：

    .catItemBody img {

  float: right;
  width: 35%;
  max-width: 400px;

}


.catItemBody:nth-child(even) img {

  float: left;
  width: 35%;
  max-width: 400px;

}

我可以使用上面的css定位img标签，因为它出现在元素检查器中，但它似乎选择了所有图像，而不仅仅是我想要的偶数文章/项目中的图像。

关于我哪里出错的任何想法？

网站页面目前位于开发期间：http://www.themanofice.co.uk/index.php/about/cni-solutions-overview

Answer 1

.catItemBody的每个人都是：

<div class="catItemView groupLeading">
    <div class="catItemHeader"></div> /* This one is odd */
    <div class="catItemBody"></div> /* This one is even */
</div>
<div class="catItemView groupLeading">
    <div class="catItemHeader"></div> /* This one is odd */
    <div class="catItemBody"></div> /* This one is even, again */
</div>

因为nth-child是从最接近的上升者计算的，而不是从整个文档中计算出来的。

您必须制作选择器＆＃34; uglier＆＃34;：

.itemContainer:nth-of-type(even) .catItemBody img {}

除非没有其他图像，否则你可以使用

.itemContainer:nth-of-type(even) img {}

我使用nth-of-type代替nth-child，只是因为你有清除div，所以每个.itemContainer实际上是奇数。

或者你可以为偶数项创建一个新类。

Answer 2

您错误地使用nth-child来定位替代图像。如果所有.catItemBody元素都位于同一父级内，则样式将仅适用于备用图像。

但由于它们嵌套在.itemContainer中，因此未应用样式。尝试将您的CSS样式更改为：

.itemContainer img {

  float: right;
  width: 35%;
  max-width: 400px;

}


.itemContainer:nth-child(even) img {

  float: left;
  width: 35%;
  max-width: 400px;

}

CSS甚至nth-child嵌套img问题

2 个答案: