Question

我有一个像这样的博客/网站，我试图让每个帖子以交替顺序显示。第一个帖子的图像显示在右侧，第二个帖子图像显示在左侧...

<html>
<head>
    <title>My Blog</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="section">
    <article>
      <a href="#"><img src="/img/picture1.jpg" width="100" height="100" /></a>    
      <h2>Post Title 1</h2>
      <p>post contents post contents</p>
    </article>

    <article>
      <a href="#"><img src="/img/picture2.jpg" width="100" height="100" /></a>    
      <h2>Post Title 2</h2>
      <p>post contents post contents</p>
    </article>

    <article>
      <a href="#"><img src="/img/picture3.jpg" width="100" height="100" /></a>    
      <h2>Post Title 3</h2>
      <p>post contents post contents</p>
    </article>

    <article>
      <a href="#"><img src="/img/picture4.jpg" width="100" height="100" /></a>    
      <h2>Post Title 4</h2>
      <p>post contents post contents</p>
    </article>  
</div> <!-- /.section -->

</body>
</html>

我已经了解了CSS nth-child和nth-of-type选择器，但仍然是如何正确使用它的新手。

我有一个示例CSS代码，我根据这里的答案建模：Problem with odd/even child elements in nth-child但我无法在文章元素中正确设置标记样式。

div.section article img:nth-of-type(odd) {
    float: right;
}

div.section article img:nth-of-type(even) {
    float: left;
}

我搜索了一些模型设计，我发现这与我的网站类似。

非常感谢任何帮助。

Answer 1

将第n个类型附加到文章

div.section article:nth-of-type(odd) img {
    float: right;
}

div.section article:nth-of-type(even) img {
    float: left;
}

Answer 2

你想要这样的样品吗？ https://jsfiddle.net/ahe128/k4gvdqhg/

样式代码

   .section{width:300px;}
div.section article:nth-of-type(odd) img {
    float: left;
}

div.section article:nth-of-type(even) img {
    float: right;
}

#w_odd {
    float: left;
}

#w_even {
    float: right; 
}

和html

<div class="section">
    <article>
      <a href="#"><img src="/img/picture1.jpg" width="100" alt="1" height="100" /></a>    
    <div id="w_odd">  <h2>Post Title 1</h2>
    <p>post contents post contents</p> </div>
    </article>

    <article>
      <a href="#"><img src="/img/picture2.jpg" width="100" height="100" /></a>    
  <div id="w_even"> 
   <h2>Post Title 2</h2>
      <p>post contents post contents</p>
      </div> 
    </article>

    <article>
      <a href="#"><img src="/img/picture3.jpg" width="100" height="100" /></a>    
   <div id="w_odd">    <h2>Post Title 3</h2>
   <p>post contents post contents</p> </div>
    </article>

    <article>
      <a href="#"><img src="/img/picture4.jpg" width="100" height="100" /></a>    
   <div id="w_even">     <h2>Post Title 4</h2>
   <p>post contents post contents</p> </div>
    </article>  
</div> <!-- /.section -->

在我的网站上替代显示帖子

2 个答案: