Setting parent's width the same it's child

Question

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!

Flexbox cannot make siblings track the height / width of one particular sibling ([**details**](http://stackoverflow.com/q/34194042/3597276)). You would need to use JS or possibly absolute positioning (but you would need to know the height) ([**demo**](https://jsfiddle.net/e8tyv4k1/1/)). — Michael Benjamin, Apr 06 '17 at 21:18

score 3 · Answer 1 · answered Apr 06 '17 at 19:56

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>

Nice, I jumped right into jQuery, never even thought of going straight CSS — Dryden Long, Apr 06 '17 at 19:58

Dryden Long · Accepted Answer · 2017-04-06T20:31:59.897

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()

Thank you Dryden. Is there any way to avoid an FOUC issue? It needs to be on window.load but with that comes a flash of unstyled content issue. — Quesofat, Apr 06 '17 at 20:08

score 0 · Answer 3 · answered Apr 06 '17 at 19:55

0

If you want to use jQuery then

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

would do it.

answered Apr 06 '17 at 19:55

serdar.sanri

2,217
1
17
21

Setting parent's width the same it's child

3 Answers3