Question

我有一个包含图片和段落的DIV包装器（居中）：

我想要做的是使包装的宽度变得灵活，以便它可以适合图片的宽度。我用display：table; （我也试过内联块，也有宽度：适合内容; [最后一个奇怪的是没有工作]。）

文字也非常适合那里，但......！一旦文本变得比图片的宽度更长，包装器就会扩展以适应文本而不是拟合图片（并打破文本）。

这个问题有解决办法吗？

＆＃13;

.image_wrapper {
    display:table;
    margin:25px auto 25px auto; /* centering wrapper on page */
    text-align:center;
    border: 1px solid red;
}

.image_wrapper img {
    height: auto;
    max-width:99%;
    border: 3px solid #31558e; 
}

.image_wrapper p {
    color:#84bddb;
    font-size: 13.3px;
    line-height: 15px;
    text-align: left;
    margin-left:0px;
}

＆＃13;

<div class="image_wrapper">
  <img src="pic.jpg">
  <br>
  <p>Some text</p>
</div>

＆＃13;

Answer 1

.wrapper {
  border: 1px solid red;
  display: table;
  width: 1%;
	margin: 0 auto;
}

.caption {
	text-align: center;
}

<div class="wrapper">
  <img src="http://via.placeholder.com/200/300">
  <p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
    Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Answer 2

你可以使用图形/ figcaption组合在没有jQuery的情况下采用这种方法，但这只适用于你在页面上有一个figure / figcaption元素的情况。

将图形的高度设置为100％，并将图标题的宽度设置为图像的宽度。这将包含图元素中的所有文本，并允许高度扩展为文本的长度。

figure {
  display: table;
  margin: 25px auto 25px auto;
  /* centering wrapper on page */
  text-align: center;
  border: 1px solid red;
  height: 100%;
}

figcaption {
  color: #84bddb;
  font-size: 13.3px;
  line-height: 15px;
  text-align: left;
  margin-left: 0px;
  width: 100px;
}

<figure>
  <img src="http://via.placeholder.com/100x150" width="100">
  <br>
  <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>

我建议使用一些jQuery来处理宽度以及多个div的情况，以及不同大小的图像。

$(document).ready(function() {

  $(".image_wrapper img").each(function(index, value) {
    var width = $(this).width();
    $(this).parent().children(".image_wrapper > p").css("width", width);
  })
});

.image_wrapper {
    display:table;
    margin:25px auto 25px auto; /* centering wrapper on page */
    text-align:center;
    border: 1px solid red;
}

.image_wrapper img {
    height: auto;
    max-width:99%;
    border: 3px solid #31558e; 
}

.image_wrapper p {
    color:#84bddb;
    font-size: 13.3px;
    line-height: 15px;
    text-align: left;
    margin-left:0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrapper">
      <img src="http://via.placeholder.com/100x150">
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>

<div class="image_wrapper">
      <img src="http://via.placeholder.com/150x150">
      <br>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>

此外，如果使用figure / figcaption组合，则不需要使用类编写自定义div。

$(document).ready(function() {

  $(".myFigure img").each(function(index, value) {
    var width = $(this).width();
    $(this).parent().children(".myFigure > .myCaption").css("width", width);
  })
});

figure {
  display: table;
  margin: 25px auto 25px auto;
  /* centering wrapper on page */
  text-align: center;
  border: 1px solid red;
  height: 100%;
}

figcaption {
  color: #84bddb;
  font-size: 13.3px;
  line-height: 15px;
  text-align: left;
  margin-left: 0px;
  /*width: 100px;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="myFigure">
  <img src="http://via.placeholder.com/100x150" width="100">
  <br>
  <figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>

<figure class="myFigure">
  <img src="http://via.placeholder.com/150x150">
  <br>
  <figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
    ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
    orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>

防止文本扩展包装器

2 个答案: