如何在某些文本旁边显示图像 [英] How to display an image next to some texts

问题描述

我想达到以下效果：

DIVS分为三个部分，一旦达到一定的屏幕尺寸，我希望他们使用媒体查询叠加。 / p>

这里是HTML（忽略内联CSS，我将它移动到一个文件，一旦我工作）：

 < div class =col span_1_of_3style =height：150px;> 
< div class =test2nstyle =height：100％;> 
< div style =float：left; displat：inline-block; width：28％padding-right：2％; height：100％;>< img id =NewsArticle_2790_imageclass = imgArtThumbtitle =The Comalt =The Comsrc =tOne.png？n = 5350/>< / div> 
< div style =float：left; display：inline-block; width：58％; height：100％;> 
< div style =width：100％; height：48％; padding-bottom：2％; text-align：left;>< a href =/ template.aspx？id = 2790 >我们如何更好地开发< / a>< / div> 
< div style =width：100％; height：48％; overflow：hidden; text-overflow：ellipses; white-space：nowrap; text-align：left>文本，但不符合设置尺寸的任何内容将以...结尾< / div> 
< / div> 
< / div> 
< / div> 
< div class =col span_1_of_3style =height：150px;> 
< div class =test2nstyle =height：100％;> 
< div style =float：left; displat：inline-block; width：28％padding-right：2％; height：100％;>< img id =NewsArticle_2790_imageclass = imgArtThumbtitle =The Comalt =The Comsrc =tOne.png？n = 5350/>< / div> 
< div style =float：left; display：inline-block; width：58％; height：100％;> 
< div style =width：100％; height：48％; padding-bottom：2％; text-align：left;>< a href =/ template.aspx？id = 2790 >我们如何更好地开发< / a>< / div> 
< div style =width：100％; height：48％; overflow：hidden; text-overflow：ellipses; white-space：nowrap; text-align：left>文本，但不符合设置尺寸的任何内容将以...结尾< / div> 
< / div> 
< / div> 
< / div> 
< div class =col span_1_of_3style =height：150px;> 
< div class =test2nstyle =height：100％;> 
< div style =float：left; displat：inline-block; width：28％padding-right：2％; height：100％;>< img id =NewsArticle_2790_imageclass = imgArtThumbtitle =The Comalt =The Comsrc =tOne.png？n = 5350/>< / div> 
< div style =float：left; display：inline-block; width：58％; height：100％;> 
< div style =width：100％; height：48％; padding-bottom：2％; text-align：left;>< a href =/ template.aspx？id = 2790 >我们如何更好地开发< / a>< / div> 
< div style =width：100％; height：48％; overflow：hidden; text-overflow：ellipses; white-space：nowrap; text-align：left>文本，但不符合设置尺寸的任何内容将以...结尾< / div> 
< / div> 
< / div> 
< / div> 
  

CSS：

 code> .imgArtThumb 
 {
 width：155px; 
 height：100px; 
} 
 .test2n 
 {
 text-align：left; 
 box-shadow：inset 0 -1px 1px rgba（0,0,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设置为置换：inline-block而不是显示

I am trying to achieve the following:

The DIVS are divided in three section and once reaching a certain screen size, I want them to stack on top of another using Media Queries.

Here is the HTML (disregard inline CSS, i will be moving it to a file once I have it working):

<div class="col span_1_of_3" style="height: 150px;">
    <div class="test2n" style="height: 100%;">
        <div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"><img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>
        <div style="float: left; display: inline-block; width: 58%; height: 100%;">
            <div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">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 class="col span_1_of_3" style="height: 150px;">
    <div class="test2n" style="height: 100%;">
        <div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"><img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>
        <div style="float: left; display: inline-block; width: 58%; height: 100%;">
            <div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">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 class="col span_1_of_3" style="height: 150px;">
    <div class="test2n" style="height: 100%;">
        <div style="float: left; displat: inline-block; width: 28% padding-right: 2%; height: 100%;"><img id="NewsArticle_2790_image" class="imgArtThumb" title="The Com" alt="The Com" src="tOne.png?n=5350" /></div>
        <div style="float: left; display: inline-block; width: 58%; height: 100%;">
            <div style="width: 100%; height: 48%; padding-bottom: 2%; text-align: left;"><a href="/template.aspx?id=2790">How we can better develop</a></div>
            <div style="width: 100%; height: 48%; overflow: hidden; text-overflow: ellipses; white-space: nowrap; text-align: left">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,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%;
    }
}

Here is the JSFiddle: http://jsfiddle.net/ofrj55j4/1/

Updated JSFiddle with max-width set to 90%: http://jsfiddle.net/ofrj55j4/6/

How to I make it so that the image is centered on the left vertically and the top right title link should take up 50% and the description on bottom right take up 50%. For the description I would like to have the ellipses if it exceeds the dimension.

UPDATE: I got everything working except the ellipses. Why doesn't fill out the entire DIV before using the ellipses? JSFiddle: http://jsfiddle.net/ofrj55j4/19/

解决方案

Maybe it is just a typo you entered here on the site...your divs that contain the image are set to displat: inline-block instead of display

这篇关于如何在某些文本旁边显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！