用文字填充圖像和邊緣之間的空間

對於此屏幕尺寸，文本div應該對齊到右側，並且它應該填充圖像和邊緣之間的所有空間。用文字填充圖像和邊緣之間的空間

圖像的寬度是固定的，但文本寬度是響應的。

對於較小的屏幕尺寸文本的div應高於圖像（它與HTML導致我的代碼，所以我沒有在這裏添加更多媒體查詢）

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

來源

2013-10-10 Daniel

不幸的是，你的例子中沒有圖像。 –

是的，你可以很容易地添加像這樣的圖像：' text equivalent of image goes here ' –

我認爲這並不重要。如果屏幕尺寸在1151像素和1411像素之間，則顯示藍色和綠色方塊作爲背景，不是嗎？ – Daniel

有中沒有圖像你的小提琴。

對於較小的屏幕尺寸文本的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.. 
    */ 
}

這樣您可以發送圖片上方的文字。

來源

2013-10-15 16:59:36

用文字填充圖像和邊緣之間的空間

回答

相關問題