проблема с изображениями

f0rzik · November 7, 2011

Привет всем! Вопрос есть к примеру три изображения одно нужно разместить слева, другое в центре, стретье с права, между ними комменты приблизительно так :

все попытки заканчивались плачевно, или текст вылезал непонятно куда, или картинки смещались, или эти же самые картинки не хотели размещатся горизонтально.

собственно подскажите кто чем может...

з.ы. забыл добавить все это дело в диве находится отдельном.

Edited November 7, 2011 by f0rzik

Switch74 · November 7, 2011


<style>
*{margin:0px;padding:0px;}
img{border:0px;}
.content div{float:left;width:20%;}
.content img{width:100%;}
div.clear{clear:both;float:none;width:auto;}
</style>
<body>
        <div class="content">
                <div><img src="http://nailart-jana.narod.ru/333.jpg"></div><div>Первый текст</div>
                <div><img src="http://nailart-jana.narod.ru/333.jpg"></div><div>Второй текст</div>
                <div><img src="http://nailart-jana.narod.ru/333.jpg"></div>
		<div class="clear"></div>
        </div>
</body>

Edited November 7, 2011 by Switch74

Gaspode · November 7, 2011

<div class="clear"></div>

Ну что за грязь в разметке?

.content {
   overflow: hidden;
}

вот и всех делов.

Switch74 · November 7, 2011

<div class="clear"></div>
Ну что за грязь в разметке?
.content {
   overflow: hidden;
}
вот и всех делов.

спс, учту это замечание.

Rikani · November 8, 2011

Или

.content:after {
 content: "";
 display: table;
 clear: both;
}

Switch74 · November 8, 2011

тоже интересное решение, но я стараюсь не пользоваться тегами не поддерживающимися двумя последними версиями браузеров, да и Gaspode более краткое, кроссбраузерное и пока особых нареканий в нём я не вижу.

f0rzik · November 8, 2011

спасибо за подсказку, вечером попробую, делал похожим способом правда прописывал стиль для всего дива использовал margin, в итоге изображения разбросало в разные стороны

Gaspode · November 8, 2011

тоже интересное решение, но я стараюсь не пользоваться тегами не поддерживающимися двумя последними версиями браузеров, да и Gaspode более краткое, кроссбраузерное и пока особых нареканий в нём я не вижу.

То есть? Это работает везде, кроме ИЕ 6-7. Для них нужны костыли, например так:

* html .content {
   height: 1%;
}
*:first-child+html .content {
   min-height: 1px;
}

В сочетании с вышеуказанным будет работать везде — и этот способ универсальнее, чем указанный мной, потому что у overflow: hidden; кроме данного "побочного" эффекта есть ещё и основной: обрезание всего, что выходит за границы контейнера, — а это не всегда приемлемо. Например, если внутри него есть позиционированные элементы, которые "торчат наружу".

UPD

Пардон, прочитал невнимательно.

.content:after {
 content: "";
 display: table;
 clear: both;
}

Странное какое-то решение, хоть и рабочее вроде бы. display: block выглядит логичнее. И height: 0 тоже надо добавить. А лучше ещё и visibility: hidden, от греха подальше.

Edited November 8, 2011 by Gaspode

Rikani · November 8, 2011

Пуленепробиваемое решение. Можно и display: block.

Минус overflow:hidden, в то, что это overflow:hidden. А если нужно отличное от hidden значение?

P.S. Забыл добавить, чтобы была полная поддержка всех браузеров надо дописать для IE6 zoom: 1. Работать будет везде.

Gaspode · November 8, 2011

zoom: 1. Работать будет везде.

Ну, если валидность не упёрлась, то и так можно.

Rikani · November 8, 2011

conditional comments

Justnewone · November 9, 2011

.content:after {
 content: "";
 display: block;
 clear: both;
 height:0;
 overflow:hidden;
}

.content {
 *zoom:1;
}

Железнорабочее, от ие6 и далее, желательно только zoom в кондишнал комментс спрятать.

Switch74 · November 10, 2011

если указаны размеры overflow:hidden; просто не нужен, так как с размерами будет норм всё отрабатывать, а если блок не имеет жёстких размеров, то overflow:hidden; по моему самое оптимальное решение.

Justnewone · November 10, 2011

в ИЕ6 вы можете сколь угодно указывать размеры, но если браузер там найдет хотя бы пробел... попробуйте, в общем.

f0rzik · November 10, 2011

блин все равно не получилось, или изображения растянуты и подписи боковые ко всем трем не влазят, или расположено это все дело не горизонтально а вертикально

Sign In

проблема с изображениями

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information