Question

我正在使用文本编辑器来为帖子的每个部分创建<p>。

有时内容包含1张或更多图片，有时没有图片。

.post{
  background-color: #000;
  margin-bottom: 20px;
  color: #fff
}

.post img + img{
  width: 50%
}

<div class="post">
    <p>First Post</p>
    <p>
        <img src="http://placehold.it/300x300/200">
    </p>
</div> <!-- .post -->
    
<div class="post">
    <p>Second Post</p>
    <p>
        <img src="http://placehold.it/300x300/200">
        <img src="http://placehold.it/300x300/200">
    </p>
</div> <!-- .post -->

因此，如果有两个图像，我希望每个图像都占50%的宽度。

我可以设置第二张图像的宽度：

.posts img + img{
    width:50%
}

但是如何选择第一个？

这是一个现场的小提琴： http://jsfiddle.net/zjwhgq81/14/

我需要在不同浏览器上的大多数浏览器都支持的x浏览器兼容解决方案。

请不要建议在img上添加类或ID，正如我提到的，我正在使用文本编辑器。

Answer 1

尝试一下：

选择有一个孩子的帖子

.post p img:first-child:nth-last-child(1) {
    width: 100%;
}

选择有更多孩子的帖子

/* Select the first of more */
.post p img:nth-child(1) {
    width:60%
}

/* Select others of more except the first */
.post p img:nth-child(n+2) {
    width: 10%;
}

.post{
  background-color: #000;
  margin-bottom: 20px;
  color: #fff;
  width:100%;
}

.post p img:first-child:nth-last-child(1) {
    width: 100%;
}

.post p img:nth-child(1) {
    width:60%
 
}

.post p img:nth-child(n+2) {
    width: 10%;
}

<div class="post">
    <p>First Post</p>
    <p>
        <img src="http://placehold.it/300x300/200">
    </p>
</div> <!-- .post -->
    
<div class="post">
    <p>Second Post</p>
    <p>
        <img src="http://placehold.it/300x300/200">
        <img src="http://placehold.it/300x300/200">
    </p>
</div> <!-- .post -->

Answer 2

.post p img:first-child, .post p img:last-child {
  width:50%;
}
.post p img:last-child:first-child {
    width:100%
}

或

   .post p img {
      width:50%;
    }
    .post p img:last-child:first-child {
        width:100%
    }

当只有一个图像时，第一张和最后一张是相同的，因此您可以将其设置为100％或任何您想要的图像。

Answer 3

在此处输入代码您可以使用Jquery确定每个img的宽度。对我来说，最简单的方法是这样：

for (let i = 0; i < $('.post p').length; i++) {
	let items = $($('.post p')[i]).children();
	items.css('width', (100 / items.length) + '%');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h2 {
  text-align: center;
  text-shadow: 1px 1px #111;
  padding: 20px 0;
}

p {
  padding: 0;
  display: flex;
}

.post{
  background-color: #999;
  margin-bottom: 20px;
  color: #fff;
}

.post img {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="post">
    <h2>First Post</h2>
    <p>
        <img src="http://placehold.it/300x300/200">
    </p>
</div>
    
<div class="post">
    <h2>Second Post</h2>
    <p>
        <img src="http://placehold.it/300x300/200">
        <img src="http://placehold.it/300x300/200">
    </p>
</div>

如果图像不止一个，请添加样式

3 个答案: