Div将图像大小和div放在页面中的空白区域

Question

你好我想让我的div大小根据图像大小而变化。在图像下方有一个文本框，我想让文本框的宽度不会超过图像，而是改变高度。另外如何让我的div放在页面自由的地方。 这是我到目前为止： 正如你可以看到文本字段改变div的宽度，并且div被排成一行，但是我需要将它们作为一个有限的图像放在自由的区域中。

这是我希望制作的风格：

我的Css：

#figure2 {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    margin: 0.7em;
    border-radius: 25px;
    background: white;
    font-size: xlarge;
}
#figure2 h3 {
  text-align: center;
  font-style: italic;
  font-size: large;
}

我的HTML：

<% loop $Images.Sort('SortOrder') %>
<a href="$Top.WebsiteLinkHyper">
<div id="figure2">
    $Tag 
<h3>$Title</h3>
</div>
</a>
<% end_loop %>

对不起英语不好的人，不是我的母语。

Answer 1

您可以向文本元素应用以下CSS规则：

overflow-wrap: break-word;

当需要时，它会将文本分解为新行。

示例：

div {
  border: 1px black solid;
  width: 100px;
}

p {
  overflow-wrap: break-word;
}

<div>
  <p>text text text text text text text text text text text text text text text
</div>

如果你想打破长话，你可以使用以下规则：

word-wrap: break-word;
word-break: break-all;

另一个例子：

div {
  border: 1px black solid;
  width: 100px;
}

p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

<div>
  <p>text text text text text text text text text text text text text text text
</div>