将父元素的宽度设置为与其子元素相同

Question

我可能有30个这样的引脚：

 <div class="pin">
            <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" />
            <h2>Title</h2>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <a href="#">Read More...</a>
    </div>

我希望能够将每个 .pin 的宽度设置为与 .blog-img 相同的宽度。但当这30个瓷砖的大小都不一样的时候，该如何实现呢？

如果可以使用jQuery，我是很乐意的。

编辑：为了澄清这个项目，这些瓷砖将会从后端通过JSON生成并在前端使用EJS呈现。因此，必须具有动态性。

要求：必须能够在父容器中使用 display flex。

谢谢！

- Quesofat

---

Flexbox 无法使兄弟元素跟踪一个特定兄弟元素的高度/宽度（详情）。您需要使用 JS 或可能的绝对定位（但您需要知道高度）（演示）。 - Michael Benjamin

Answer 1

使用CSS可以实现：

.pin {
  display:table;
  width:1%;
  background:gray;
}

<div class="pin">
  <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" />
  <h2>Title</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <a href="#">Read More...</a>
</div>

- DaniP

---

很好，我直接开始使用jQuery了，甚至没有考虑过使用纯CSS。 - Dryden Long

Answer 2

像这样的东西应该可以解决问题

$('.pin').each(function(){
  var w = $(this).children('.blog-img').width();
  $(this).width(w);
  $(this).animate({opacity:1}, 1000);
});

.pin {
opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pin">
        <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" />
        <h2>Title</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <a href="#">Read More...</a>
</div>

编辑：为了使更改不那么突兀，可以先使用 opacity: 0; 将元素隐藏，然后使用 animate() 淡入它们。

- Dryden Long

---

谢谢你，Dryden。有没有什么方法可以避免FOUC问题？它需要在window.load上，但这会带来未经样式处理的内容闪烁问题。 - Quesofat

Answer 3

如果你想使用jQuery，那么就要使用以下代码：

$(function(){
  $.each($('.pin'), function(){
     $(this).width( $('.blog-img').first().width());
  });
});

会做的。

- serdar.sanri