gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 12:14:19 24 4
gpt4 key购买 nike

对于这个屏幕尺寸,文本 div 应该右对齐,并且它应该填充图像和边缘之间的所有空间。

图片宽度固定,文字宽度自适应。

对于较小的屏幕尺寸,文本 div 应该在图像上方(它来 self 代码中的 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;}
}

最佳答案

您的 fiddle 中没有图像。

For the smaller screen sizes the text div should be above image (it results from html in my code so I didn't add more media queries here)

最简单的方法是:

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..
*/
}

这样您就可以在图片上方发送文字。

关于html - 用文本填充图像和边缘之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19292394/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com