javascript - 将父级的宽度设置为与子级相同

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。

编辑:为了澄清这个元素，这些图 block 将在后端使用 JSON 生成，在前端使用 EJS 生成。所以这需要是动态的。

条件:必须能够在父容器中使用 display flex。

谢谢!

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>