Question

我可能有30个这样的针脚：

＆＃13;

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

＆＃13;

我正在尝试将每个.pin宽度设置为与.blog-img宽度相同。如果30个引脚中的每个引脚都是独一无二的，我该怎么做？

我愿意使用jquery。

编辑：为了澄清这个项目，这些图块将使用JSON从后端生成，并使用EJS在前端生成。所以这需要是动态的。

标准：必须能够在父容器中使用display flex。

谢谢！

Answer 1

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

Answer 2

这样的事情可以解决问题

＆＃13;

$('.pin').each(function(){
  var w = $(this).children('.blog-img').width();
  $(this).width(w);
  $(this).animate({opacity:1}, 1000);
});

＆＃13;

.pin {
opacity: 0;
}

＆＃13;

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

＆＃13;

编辑：要使更改不那么刺耳，请先使用opacity: 0;隐藏隐藏的元素，然后使用animate()淡化它们

Answer 3

如果你想使用jQuery那么

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

会这样做。

Answer 4

您可以使用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>

将父母的宽度设置为与其相同的宽度

4 个答案: