Как отобразить изображение рядом с некоторыми текстами
Я пытаюсь добиться следующего:
DIVS разделены на три части, и когда они достигнут определенного размера экрана, я хочу, чтобы они размещались поверх другого с помощью Media Queries.
Вот 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/