Clever Geek Handbook

Setting parent width the same as child

I may have 30 such contacts:

 <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>
Run codeHide result


And I am trying to set each width the .pin

same as the width .blog-img

. How do I do this when each of the 30 contacts is unique in size?

I am open to using jquery.

Edit: To provide clarification for this project, these snippets will be generated from the back using JSON and from the front using EJS. Therefore it should be dynamic.

Criteria: Must be able to use flex display in parent container.

Thank!

+3


source to share


4 answers


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>
Run codeHide result


Edit: To make the change less sluggish, start with the elements hidden with opacity: 0;

, then fade them out withanimate()

+2


source


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>
Run codeHide result


+3


source


If you want to use jQuery then

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

would do it.

0


source


You can use CSS table

+ table-caption

adding a container around the text.

.pin {
  display: table;
}

.text {
  display: table-caption;
  caption-side: bottom;
}
      

        
        
        
      

    
<div class="pin">
  <img class="blog-img" src="http://placehold.it/300x300" alt="blog post" />
  <div class="text">
    <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>
</div>
Run codeHide result


0


source






More articles:


All Articles