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

Question

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

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

对于较小的屏幕尺寸，文本div应该在图像上方(它来自我的代码中的html，所以我没有在这里添加更多媒体查询(

http://jsfiddle.net/cqNDH/

.HTML：

    <div id="galeria">
    <div class="gutter"></div>
    <div class="wrapper" id="m_col">
    <div id="content--pro">
        <a>previous</a>
        <a>next</a>
        <p>THIS IS TITTLE</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
        <a><p>a link</p></a>
    </div><div id="show" ><span id="img--pro"><span id="img--pro--inner"></span></span></div><div id="show" >
    <span style="background-color:green" id="img--pro"><span id="img--pro--inner"></span></span></div>
</div>
</div>

.CSS：

@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;}
}

Answer 1

你的小提琴里没有图像。

对于较小的屏幕尺寸，文本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..
  */
}

这样，您可以发送图像上方的文本。