html – 如何在某些文本旁边显示图像

概述我想要实现以下目标： DIVS分为三个部分,一旦达到一定的屏幕尺寸,我希望它们使用媒体查询堆叠在另一个上面. 这是HTML(忽略内联CSS,我将它运行后将其移动到文件中)： <div class="col span_1_of_3" style="height: 150px;"> <div class="test2n" style="height: 100%;"> <div 我想要实现以下目标：

divS分为三个部分,一旦达到一定的屏幕尺寸,我希望它们使用媒体查询堆叠在另一个上面.

这是HTML(忽略内联CSS,我将它运行后将其移动到文件中)：

<div  >    <div  >        <div ><img ID="NewsArticle_2790_image"  title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>        <div >            <div ><a href="/template.aspx?ID=2790">How we can better develop</a></div>            <div >TThis div will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>        </div>    </div></div><div  >    <div  >        <div ><img ID="NewsArticle_2790_image"  title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>        <div >            <div ><a href="/template.aspx?ID=2790">How we can better develop</a></div>            <div >TThis div will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>        </div>    </div></div><div  >    <div  >        <div ><img ID="NewsArticle_2790_image"  title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>        <div >            <div ><a href="/template.aspx?ID=2790">How we can better develop</a></div>            <div >TThis div will have a long text but anything that doesn't fit the set dimension will end with a "..."</div>        </div>    </div></div>

CSS：

.imgArtThumb{    wIDth: 155px;    height: 100px;}.test2n{    text-align: left;    Box-shadow: inset 0 -1px 1px rgba(0,0.5),inset 0 1px 1px rgba(238,146,85,1);}.test2 p,.test2n p{    text-align: left;}/*  ColUMN SETUP  */.col {    display: block;    /*float:left;*/    display: inline-block;    margin: 1% 0 1% 0;}.col:first-child {    margin-left: 0;}.span_1_of_3 {    wIDth: 32.2%;}@media only screen and (max-wIDth: 825px) {    .col {         margin: 1% 0 1% 0%;    }}@media only screen and (max-wIDth: 825px) {    .span_3_of_3 {        wIDth: 100%;     }    .span_2_of_3 {        wIDth: 100%;     }    .span_1_of_3 {        wIDth: 98%;    }}

这是Jsfiddle：http://jsfiddle.net/ofrj55j4/1/

更新了Jsfiddle,最大宽度设置为90％：http://jsfiddle.net/ofrj55j4/6/

如何制作图像使图像在左侧垂直居中,右上角的标题链接占50％,右下角的描述占50％.对于描述,如果它超出维度,我想要省略.

更新：除了省略号,我得到了一切工作.为什么在使用省略号之前没有填写整个div？ Jsfiddle：http://jsfiddle.net/ofrj55j4/19/

解决方法 也许这只是你在网站上输入的一个错误…你的包含图像的div被设置为displat：inline-block而不是display 总结

以上是内存溢出为你收集整理的html – 如何在某些文本旁边显示图像全部内容，希望文章能够帮你解决html – 如何在某些文本旁边显示图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。