html - 如果只有一个元素位于另一个元素旁边，则应用 css 规则

Question

我想问一个问题，看看这在 CSS 中是否可行。可能不是：我准备在造型上做出一些让步。

背景：我正在重新设计和重新设计一个现有的博客。这有超过 80 个帖子（大部分）使用相同的标记。所以我想要做的是应用适用于现有 html 的样式 - 添加类和更改顺序意味着要浏览所有帖子并且需要几个小时。

一篇文章的标记示例：

<p>Block of text </p> 

<img src="example">

<p>Block of text </p> 
<img src="example">
<img src="example">

<p>Block of text </p> 
<img src="example">

这是一个示例：图像和段落的顺序因帖子而异，因此这将是完全随机的。

我要做的是对彼此跟随的图像应用 50% 宽度的样式，因此它们彼此相邻。

像这样：□□

我想将自己的图像设置为全角 - 100%

有没有办法使用 CSS 来实现这一点？

像 nth-of-type(3) 这样的 CSS 规则将不起作用 - 图片和 p 标签的顺序是完全随机的，因此在一篇文章中，第三个 img 标签将单独放置，而在另一篇文章中则必须放置旁边的另一个图像。

像 img + img 这样的规则适用于第二张图片，但我需要第一张图片也应用相同的样式。像 p + img 这样的规则也会导致单个图像缩小。

有什么建议么？'这无法完成'的答案也很好，因为我知道停止尝试。

标签： htmlcss

Answer 1

Flexbox 可以做到这一点。我将 flex 应用于 body 但它应该是您代码中的容器：

body {
  display:flex;
  flex-wrap:wrap;
}
p {
 width:100%;
}
img {
  width:50%;
  min-width:0;
  flex-grow:1; /* this will do the trick when the image is alone */
}

<p>Block of text </p> 

<img src="https://i.picsum.photos/id/107/800/400.jpg">

<p>Block of text </p> 
<img src="https://i.picsum.photos/id/106/800/400.jpg">
<img src="https://i.picsum.photos/id/17/800/400.jpg">

<p>Block of text </p> 
<img src="https://i.picsum.photos/id/108/800/400.jpg">

<p>Block of text </p> 
<img src="https://i.picsum.photos/id/104/800/400.jpg">
<img src="https://i.picsum.photos/id/108/800/400.jpg">
<img src="https://i.picsum.photos/id/175/800/400.jpg">
<img src="https://i.picsum.photos/id/125/800/400.jpg">

或者如下所示，如果您想在没有图像的情况下将其应用于图像，即使数字是奇数也是如此。

body {
  display:flex;
  flex-wrap:wrap;
}
p {
 width:100%;
}
img {
  width:50%;
  min-width:0;
}
p + img {
  flex-grow:1; /* this will do the trick when the image is alone */
}

<p>Block of text </p> 

<img src="https://i.picsum.photos/id/107/800/400.jpg">

<p>Block of text </p> 
<img src="https://i.picsum.photos/id/106/800/400.jpg">
<img src="https://i.picsum.photos/id/17/800/400.jpg">

<p>Block of text </p> 
<img src="https://i.picsum.photos/id/108/800/400.jpg">

<p>Block of text </p> 
<img src="https://i.picsum.photos/id/104/800/400.jpg">
<img src="https://i.picsum.photos/id/108/800/400.jpg">
<img src="https://i.picsum.photos/id/175/800/400.jpg">