我有一个类似这样的博客/网站，我试图让每篇文章以交替顺序显示。第一个帖子的图片显示在右侧，第二个帖子的图片显示在左侧...
<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;
}
我搜索了一些模型设计，发现这个与我的网站类似。
非常感谢任何帮助。
最佳答案
在文章中附加类型
div.section article:nth-of-type(odd) img {
float: right;
}
div.section article:nth-of-type(even) img {
float: left;
}
关于html - 在我的网站上交替显示帖子，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38411871/