Html 用文本填充图像和边缘之间的空间

对于这个屏幕大小，文本div应该向右对齐，并且应该填充图像和边缘之间的所有空间

图像的宽度是固定的，但文本宽度是响应的

对于较小的屏幕尺寸，文本div应该位于图像上方（它是我代码中html的结果，因此我没有在这里添加更多的媒体查询）

HTML:

---

你的小提琴里没有图像

对于较小的屏幕尺寸，文本div应该位于图像上方（它是我代码中html的结果，因此我没有在这里添加更多的媒体查询）

最简单的方法是：

media only screen and (max-width: 900px) {
 /* for example:
  * text can be added with a position absolute, 
  * and then use top: 0 to place it above in the container..
  */
}

---

通过这种方式，您可以在图像上方发送文本

不幸的是，您的示例中没有图像。是的，您可以轻松地添加这样的图像：

我认为这并不重要。如果屏幕大小在1151px和1411px之间，它会显示蓝色和绿色的方块作为背景，不是吗？

@media screen and (min-width: 1151px) and (max-width: 1411px)  {
    #galeria{width:100%;height: 100%;margin:0 auto;}
    .gutter{display:inline-block;width:3%;height:100%;margin-bottom:10px;float:left;display: inline-block;}
    .wrapper{height:100%;width:94%;float:left;}

    #img--pro {display: inline-block;width: 100%;font-size: 0;line-height: 0;vertical-align: middle;    background-size: 100%;
        background-position: 50% 50%;background-repeat: no-repeat;background-color:blue;
    background-image: url('');}
    #img--pro--inner {display: block;height: 0;padding-top: 100%;}
    #show{width:760px;float:left;display:inline-block;}
    #content--pro{float:right;min-width:20px; max-width:300px; display:inline-block;background-color:yellow;}
}

media only screen and (max-width: 900px) {
 /* for example:
  * text can be added with a position absolute, 
  * and then use top: 0 to place it above in the container..
  */
}