0
对于此屏幕尺寸,文本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;}
}
不幸的是,你的例子中没有图像。 –
是的,你可以很容易地添加像这样的图像:'' –
我认为这并不重要。如果屏幕尺寸在1151像素和1411像素之间,则显示蓝色和绿色方块作为背景,不是吗? – Daniel