設置父母的寬度相同的是孩子

我也許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。

編輯：爲了澄清這個項目，這些圖塊將從JSON的後端生成，使用EJS在前端生成。所以這需要是動態的。

條件：必須能夠在父容器中使用display flex。

謝謝！

來源

2017-04-06 Quesofat

Flexbox的不能使兄弟姐妹跟蹤一個特定同級的高度/寬度（[**細節**]（http://stackoverflow.com/q/34194042/3597276））。您需要使用JS或可能的絕對定位（但您需要知道高度）（[** demo **]（https://jsfiddle.net/e8tyv4k1/1/））。 –

像這樣的東西應該做的伎倆

$('.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>

編輯：爲了使變化少不和諧，使用opacity: 0;隱藏的元素開始，然後淡出他們使用animate()

來源

2017-04-06 19:55:52

謝謝德萊頓。有什麼辦法可以避免FOUC問題？它需要在window.load上，但是這帶來了一個沒有風格的內容問題。 – Quesofat

@Quesofat看到我的編輯 –

如果你想使用jQuery然後

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

會做到這一點。

來源

2017-04-06 19:55:49

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

來源

2017-04-06 19:56:38 DaniP

不錯，我跳進了jQuery，從來沒有想過要直接CSS –

您可以使用CSS table + table-caption與周圍的文字將一個容器。

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

來源

2017-04-06 20:39:41 Stickers

設置父母的寬度相同的是孩子

回答

相關問題