Html CSS-多行包装

如果你能帮忙的话，我只想就以下问题提供一些指导

基本上，如果我在图像描述中有太多的文本，它会将图像向上推。处理这样一个问题最有吸引力的方式是什么

谢谢

我创建了一个基本的小提琴-重新调整窗口的大小以使其内联

---

您可以使用

flex

进行css部分下方的相同方法更新

div.gallery{
边框：1px实心#ccc；
显示器：flex；
证明内容：中心；
柔性流动：柱状nowrap；
对齐项目：居中；
填充：10px；
}
部门画廊：悬停{
边框：1px实心#777；
}
美术馆副馆长{
/*宽度：30%*/
高度：自动；
}
分区描述{
填充：15px；
文本对齐：居中；
}
* {
框大小：边框框；
}
.反应迅速{
填充：0 6px；
显示：内联块；
宽度：15.99999%；
}
@仅介质屏幕和（最大宽度：700px）{
.反应迅速{
宽度：49.99999%；
利润率：6px0；
}
}
@仅介质屏幕和（最大宽度：500px）{
.反应迅速{
宽度：100%；
}
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}

描述
描述
描述描述描述描述

我会这样做：

div.gallery {
  border: 1px solid #ccc;
  min-height: 200px;
}

---

这将使所有框相等。

您可以添加

垂直对齐：顶部

到您的

.responsive

div，因此所有div将从顶部对齐。。 检查下面的代码片段

div.gallery{
边框：1px实心#ccc；
}
部门画廊：悬停{
边框：1px实心#777；
}
美术馆副馆长{
宽度：30%；
高度：自动；
}
分区描述{
填充：15px；
文本对齐：居中；
}
* {
框大小：边框框；
}
.反应迅速{
填充：0 6px；
显示：内联块；
宽度：15.99999%；
垂直对齐：顶部；
}
@仅介质屏幕和（最大宽度：700px）{
.反应迅速{
宽度：49.99999%；
利润率：6px0；
}
}
@仅介质屏幕和（最大宽度：500px）{
.反应迅速{
宽度：100%；
}
}
.clearfix:之后{
内容：“；
显示：表格；
明确：两者皆有；
}

描述
描述
描述描述描述描述

对于未来的人们，我认为flex解决方案在这方面确实会对我有所帮助

我创建了以下css代码：

.file-wrapper {
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: center;
    display: flex;
}
.file-image {
    padding: 30px;
}

.file-box {
    text-align: center;
    padding: 1em;
    flex-basis: 10em;
    margin: 1em;
}

.fileTextWrapper {
    display: table;
    width: 100%;
    height: 3em;
}
.file-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

---

HTML是非常不言自明的。包装包含所有元素，然后我有法师的div和他们的描述。通过这样做，它们不仅反应灵敏，而且在中心对齐，文本被很好地包装起来。

这取决于您对一个有吸引力的解决方案意味着什么，因为它还没有被提出。您可以使用文本溢出省略号

div.desc {
    padding: 15px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

---

此外，还可以将完整文件名显示为工具提示。

.file-wrapper {
    flex-direction: row;
    flex-flow: row wrap;
    justify-content: center;
    display: flex;
}
.file-image {
    padding: 30px;
}

.file-box {
    text-align: center;
    padding: 1em;
    flex-basis: 10em;
    margin: 1em;
}

.fileTextWrapper {
    display: table;
    width: 100%;
    height: 3em;
}
.file-text {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
}

div.desc {
    padding: 15px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}