Question

我有一个像这样的HTML代码：

<div class="card">
   <div class="card-content">
      <img src="somesource.png" width=480px height=320px>
      <footer>
        Some text here that makes the width of this footer greater than the width of sibling img tag.
      </footer>
   </div>
</div>

无论图像的宽度如何，我都希望页脚的宽度与其同级img的宽度相同。根据所包含的图像，图像的宽度会有所不同，但我希望页脚的宽度与图像的宽度完全相同。我尝试过以下方法：

.card {
   display: inline-block;
}
.card-content {
   display: flex;
   flex-direction: column;
}

但如果页脚比图像宽，它会扩大img。这不是我想要的。我希望页脚的宽度取决于图像的宽度，而不是相反。

请帮帮我。感谢您提前提出的建议。

Answer 1

由于图片和页脚都在同一个div而没有其他兄弟，因此他们可以轻松地与class card-content共享父div的相同宽度。

添加

img{
width : inherit;
}

footer : {
width : inherit
}

小提琴：https://jsfiddle.net/qo6e9882/1/

Answer 2

为此，您可以在父元素上使用display: table并设置width: 1%。

＆＃13;

.card-content {
  display: table;
  width: 1%;
}
footer {
  background: lightgreen;
}

＆＃13;

<div class="card">
  <div class="card-content">
    <img src="http://placehold.it/480x320">
    <footer>
      Some text here that makes the width of this footer greater than the width of sibling img tag.
    </footer>
  </div>
</div>

＆＃13;

Answer 3

试试这个

$(document).ready(function(){

    var x = $(".card-content > img").width();
    var y = $(".card-content > footer").width();
   y =  x;
    if(y == x) {
       $(".card-content > footer").css("width", x);
      }
  else{
      alert("na");
    }
    
});

.card {
   display: inline-block;
}
.card-content {
    display: flex; 
    flex-direction: column;
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="card">
   <div class="card-content">
      <img src="http://searchengineland.com/figz/wp-content/seloads/2015/10/google-panda-name3-ss-1920-800x450.jpg" width=480px height=320px>
      <footer>
        Some text here that makes the width of this footer greater than the width of sibling img tag.
      </footer>
   </div>
</div>

如何设置div的宽度等于其兄弟img的宽度

3 个答案: