I have maybe 30 of these pins:
<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>And I am trying to set each .pin width the same as the .blog-img width. How would I do this when each of the 30 pins are going to be unique in size?
I'm open to using jquery.
Edit: To give clarification on this project, these tiles will be generated from a back end with JSON and on the front end using EJS. So this needs to be dynamic.
Criteria: Must be able to use display flex in the parent container.
Thanks!
With CSS you can do this:
.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>Something like this should do the trick
$('.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>Edit: To make the change less jarring, start off with the elements hidden using opacity: 0; then fade them in using animate()
If you want to use jQuery then
$(function(){
$.each($('.pin'), function(){
$(this).width( $('.blog-img').first().width());
});
});
would do it.