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

Question

我正在努力实现以下目标:

DIVS 分为三个部分，一旦达到一定的屏幕尺寸，我希望它们使用媒体查询堆叠在另一个之上。

这是 HTML(忽略内联 CSS，我会在它工作后将其移动到一个文件中):

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

这是 JSFiddle: http://jsfiddle.net/ofrj55j4/1/

更新了 JSFiddle，将 max-width 设置为 90%:http://jsfiddle.net/ofrj55j4/6/

如何使图像垂直居中在左侧，右上角的标题链接应占 50%，右下角的描述应占 50%。对于描述，如果超出尺寸，我希望使用省略号。

更新:除了省略号之外，我的一切都正常工作。为什么在使用省略号之前不填满整个 DIV？ JSFiddle:http://jsfiddle.net/ofrj55j4/19/

Answer 1

也许这只是您在网站上输入的错字...您的包含图像的 div 被设置为 displat: inline-block 而不是显示