Einstellung der Eltern Breite das gleiche, es ist Kind

Question

ich vielleicht 30 dieser Stifte haben:

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

Und ich versuche jede .pin Breite die gleiche wie die .blog-img Breite einzustellen. Wie würde ich dies tun, wenn jeder der 30 Pins in der Größe einzigartig sein wird?

Ich bin offen für die Verwendung von jquery.

Bearbeiten: Um dieses Projekt zu verdeutlichen, werden diese Kacheln von einem Back-End mit JSON und am Front-End mit EJS generiert. Das muss also dynamisch sein.

Kriterien: Muss Display-Flex im übergeordneten Container verwenden können.

Danke!

Answer 1

So etwas sollte den Trick tun

$('.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: Um die Änderung zu machen weniger schrill, mit den Elementen beginnen versteckt mit opacity: 0; sie dann verblassen Sie sich mit der animate()

Answer 2

Wenn Sie jQuery verwenden wollen, dann

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

würde es tun.

Answer 3

Mit CSS können Sie dies tun:

.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>

Answer 4

können Sie CSS table + table-caption Verwendung mit einem Behälter um den Text hinzufügen.

.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>