Question

我试图直接在图像尺寸上调整div，导致图像下方（div内部）的任何文本在需要时打破一行。

这可能听起来令人困惑，所以让我试着更好地解释它。这是一个jsfiddle： https://jsfiddle.net/tpy50uae/

如果你注意到，第一个盒子占用了大量不必要的空间。它实际上扩展到500px的最大宽度，我只想让它在图像周围延伸。这是代码：

.grid li {
width: auto;
max-width: 500px;
min-width: 200px;
}
.grid img {
max-width: 500px;
height: auto;
margin: 0 auto;
}

如果您注意到.grid li具有最大宽度和最小宽度。但是，似乎div根据文本自动扩展到最大宽度。我想要它做的是围绕图像扩展自己，然后使所有文本断开一条线，以适应图像的宽度。我怎么能这样做？

Answer 1

在下面的课程中添加此CSS属性word-break: break-all;

.grid .description{}

Answer 2

您只需要在CSS中进行一些修改。

包含文本的div是一个块元素，因此总是希望100％的宽度适合清除双方。

这样的事情应该解决所有问题：

.grid li {
  width: auto;
  max-width: 500px;
  min-width: 200px;
  overflow: auto;
}
.grid img {
  max-width: 500px;
  height: auto;
  margin: 0 auto;
  float: left;
  display: inline;
}
.grid li .pinfo {
  display: inline;
}

JSFiddle Example

直接从图像调整div大小，打破下面的文本

2 个答案: