Можно так?

Khalil · June 28, 2011

Здравствуйте!

Есть резиновый сайт со статьями и иллюстрациями к ним внутри публикаций. У сайта на внутренних страничках минимальная ширина текстового поля равна 300 пикселям.

Можно ли реализовать то, что изображено на картинке:

http://savepic.ru/2744257.jpg

Сам я дизайнер. Прежде чем сдавать работу на верстку, хочу узнать, реализуема ли моя задумка? :-) Буду очень признателен за ваши ответы.

Edited June 28, 2011 by Khalil

Bonzash · June 28, 2011

Можно реализовать что? Можно реализовать и то и другое. Edited June 28, 2011 by Bonzash

Khalil · June 28, 2011

On 6/28/2011 at 8:17 AM, Bonzash said:
Можно реализовать что? Можно реализовать и то и другое.

Простите, надо было подробнее мне описать

Чтобы при большем разрешении поля (сайта тоже), иллюстрация с описанием становилась такой, как показано в варианте справа на приложенной мной иллюстрации.

То есть:

При ширине 300 пикс., описание иллюстрации находится под картинкой. А при ширине, например, в 400 пикс или больше, текст описания уходил вправо, за картинку.

Softlink · June 28, 2011

On 6/28/2011 at 8:23 AM, Khalil said:

On 6/28/2011 at 8:17 AM, Bonzash said:
Можно реализовать что? Можно реализовать и то и другое.
Простите, надо было подробнее мне описать
Чтобы при большем разрешении поля (сайта тоже), иллюстрация с описанием становилась такой, как показано в варианте справа на приложенной мной иллюстрации.
То есть:
При ширине 300 пикс., описание иллюстрации находится под картинкой. А при ширине, например, в 400 пикс или больше, текст описания уходил вправо, за картинку.

серому блоку задать float:left;

Bonzash · June 28, 2011

On 6/28/2011 at 8:26 AM, Softlink said:

On 6/28/2011 at 8:23 AM, Khalil said:

On 6/28/2011 at 8:17 AM, Bonzash said:
Можно реализовать что? Можно реализовать и то и другое.
Простите, надо было подробнее мне описать
Чтобы при большем разрешении поля (сайта тоже), иллюстрация с описанием становилась такой, как показано в варианте справа на приложенной мной иллюстрации.
То есть:
При ширине 300 пикс., описание иллюстрации находится под картинкой. А при ширине, например, в 400 пикс или больше, текст описания уходил вправо, за картинку.
серому блоку задать float:left;

Пойдет. Только текст будет уходить за границы блока в 400px.

Edited June 28, 2011 by Bonzash

Khalil · June 28, 2011

То есть, как я понимаю, будет не совсем так, как я изобразил?

Softlink · June 28, 2011

On 6/28/2011 at 8:29 AM, Bonzash said:
Пойдет. Только текст будет уходить за границы блока в 400px.

что-то не понял. Куда он будет уходить?

Задаем блоку ширину в 300px и ставим float:left; При ширине в 300, текст опустится вниз. При больше ширине родителя текст в аккурат покажется справа.

Edited June 28, 2011 by Softlink

Bonzash · June 28, 2011

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<style type="text/css">
.block {
	width: 400px;
	border: 1px solid black;
	margin: 10px;
	vertical-align: top;
}
.block .img {
	width: 240px;
	height: 240px;
	margin: 10px;
	border: 1px solid black;
	float: left;
}
</style>
</head>
<body>
<div class="block">
	<div class="img"> </div>
	<div class="text"> 12133333 12133333 v 12133333 12133333 12133333 12133333 12133333 12133333 12133333 </div>
	<div style="clear: both;"></div>
</div>
</body>
</html>

Удачи.

Khalil · June 28, 2011

Bonzas, Softlink, спасибо большое за помощь!

Int · June 28, 2011

On 6/28/2011 at 8:38 AM, Bonzash said:
...
Удачи.

Это что? Задача-то не решена.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<style type="text/css">
.block {min-width:300px;}
.img {
        width: 290px;
        height: 240px;
        margin-right:10px;
        border: 1px solid black;
        float: left;
}
</style>
</head>
<body>
<div class="block">
        <div class="img"> </div>
        <div class="text"> 12133333 12133333 v 12133333 12133333 12133333 12133333 12133333 12133333 12133333 </div>
</div>
</body>
</html>

При уменьшении размера окна, тект уходит вниз (только не 300px, а чуть больше, в зависимости от длины одного слова текста, которое должно поместиться справа)

Khalil · June 28, 2011

Нашел работающий пример, только там похоже, чуть иначе реализовано:

http://news.rambler.ru/10259103/

Bonzash · June 28, 2011

On 6/28/2011 at 8:59 AM, Int said:
On 6/28/2011 at 8:38 AM, Bonzash said:
...
Удачи.
Это что? Задача-то не решена.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
<style type="text/css">
.block {min-width:300px;}
.img {
        width: 290px;
        height: 240px;
        margin-right:10px;
        border: 1px solid black;
        float: left;
}
</style>
</head>
<body>
<div class="block">
        <div class="img"> </div>
        <div class="text"> 12133333 12133333 v 12133333 12133333 12133333 12133333 12133333 12133333 12133333 </div>
</div>
</body>
</html>
При уменьшении размера окна, тект уходит вниз (только не 300px, а чуть больше, в зависимости от длины одного слова текста, которое должно поместиться справа)

Понятное дело, тут надо с шириной решать, конечно слово из 30-40 букв будет выходить за границы.

Edited June 28, 2011 by Bonzash

Sign In

Можно так?

Question

Link to comment

Share on other sites

11 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

Join the conversation

Обсуждения

Important Information