Como exibir uma imagem ao lado de alguns textos

Question

Oct 13, 2014, 04:29 PM

Como exibir uma imagem ao lado de alguns textos

Estou tentando conseguir o seguinte:

Os DIVS são divididos em três seções e, uma vez que atingem um determinado tamanho de tela, quero que eles sejam empilhados em cima de outro usando as Consultas de Mídia.

Aqui está o HTML (desconsidere CSS embutido, vou movê-lo para um arquivo depois que ele estiver funcionando):

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

Aqui está o JSFiddle:http://jsfiddle.net/ofrj55j4/1/

JSFiddle atualizado commax-width definido como90%: http://jsfiddle.net/ofrj55j4/6/

Como fazer para que a imagem seja centralizada na esquerda verticalmente e o link do título superior direito ocupe 50% e a descrição no canto inferior direito ocupe 50%. Para a descrição, eu gostaria de ter as elipses se elas excederem a dimensão.

ATUALIZAÇÃO: Eu tenho tudo funcionando, exceto as elipses. Por que não preenche o DIV inteiro antes de usar as elipses? JSFiddle:http://jsfiddle.net/ofrj55j4/19/

leaveComments