+ Ответить в теме
Страница 1 из 2 1 2 ПоследняяПоследняя
Показано с 1 по 10 из 11

Тема: Обтекание текста распространияющееся только внутри определенного блока

  1. #1
    Местный goshikvia на пути к лучшему Аватар для goshikvia
    Регистрация
    07.05.2009
    Адрес
    ул.Строителей, д.12, кв.6
    Сообщений
    161

    Обтекание текста распространияющееся только внутри определенного блока

    Доброе время суток.

    Вопрос:
    Как сделать чтобы свойство "float: left" распространялось только в пределах одного определенного div?

    Описание:
    Я задаю два блока div (A и Б). Блок А (меню) обтекается слева, а у блока Б (текст) есть отступ справа => получается два вертикальных блока.
    Внутри блока Б я отображаю список состоящий из пары блоков - один изображение, другой текст. Высота изображения и объем текста для изображения каждый раз разные, т.е. в одной паре блоков изображение выше текста, в другой - текста больше.
    И еще, изображение в каждом блоке не на одном и том же месте, т.е. может быть справа от текста, может быть слева от текста.

    Надо:
    Надо чтобы в том списке изображение не наезжало на предыдущий текст и отступ между элементами списка был один и тот же. А если применяю свойство для элементов списка "clear: both;", то вот это свойство применяется и на БЛОК А (меню), что нежелательно.

    Тут видел на форуме: чтобы изображение отекалось текстом, можно применить свойство align="left". Может тогда использовать для блоков А и Б float, а для изображений align?

    P.S. Надеюсь понятно разъяснил, лучше бы конечно привести пример кода, но просто получится очень большой.

  2. #2
    Администратор Webmaster отключил(а) отображение уровня репутации Аватар для Webmaster
    Регистрация
    05.03.2007
    Адрес
    Belarus
    Сообщений
    7,531
    Записей в дневнике
    1
    лучше нарисуйте макет из блоков и сразу выделите рамкой блоки и подпишите где какие свойства стоят

  3. #3
    Местный goshikvia на пути к лучшему Аватар для goshikvia
    Регистрация
    07.05.2009
    Адрес
    ул.Строителей, д.12, кв.6
    Сообщений
    161
     
    <div id="A" style="float: right; width: 300px;">
    Тут меню
    </div>

    <div id="B" style="margin-right: 300px;">
    тут сам текст в котором перечень элементов списка состоящих из двух блоков.

    <!-- Первый эл-нт -->
    <div class="img1" style=" float: right">
    <img src="">
    </div>
    <div>
    Обтекаемый текст
    </div>

    <!-- Второй эл-нт -->
    <div class="img2" style=" float: left">
    <img src="">
    </div>
    <div>
    Обтекаемый текст
    </div>

    <!-- Третий эл-нт -->
    <div class="img1" style=" float: right">
    <img src="">
    </div>
    <div>
    Обтекаемый текст
    </div>

    <!-- И т.д. -->
    Последний раз редактировалось goshikvia; 07.05.2009 в 11:41.

  4. #4

    Вопрос

    Здраствуйте, у меня похожая проблема. Нужно сделать так как на картинке, но без использования <table>

    Делал так:

    <div><img style="float:left">Заголовок 1<br>Текст 1</div><br>
    <div><img style="float:left">Заголовок 2<br>Текст 2</div><br>
    <div><img style="float:left">Заголовок 3<br>Текст 3</div><br>
    <div><img style="float:left">Заголовок 4<br>Текст 4</div><br>
    ...

    Но выходит что каждый следующий див обтекает предыдущую картинку
    Изображения

  5. #5
    Администратор Webmaster отключил(а) отображение уровня репутации Аватар для Webmaster
    Регистрация
    05.03.2007
    Адрес
    Belarus
    Сообщений
    7,531
    Записей в дневнике
    1
    для картинок достаточно указывать
    <img align="left">

    поставьте после того как обтекание закончилось
    <br clear="both">

  6. #6
    тоесть float использовать не надо?

    если можно напишите полностью код

  7. #7
    Администратор Webmaster отключил(а) отображение уровня репутации Аватар для Webmaster
    Регистрация
    05.03.2007
    Адрес
    Belarus
    Сообщений
    7,531
    Записей в дневнике
    1
    <img src="img1.jpg" align="left">text1 text1
    <br clear="left">
    <img src="img2.jpg" align="left">text2 text2
    <br clear="left">
    <img src="img3.jpg" align="left">text3 text3
    <br clear="left">

  8. #8
    в итоге написал так:

    <div id="main"><img src="image.jpg" align="left">
    <div id="1">текст</div>
    <div id="2">текст</div>
    <div id="3">текст</div>
    <br clear="left">



    но возник еще один вопрос: как сделать чтоб содержимое div-а 3 всегда прилегало к нижнему краю div-a main? Пробовал задавать vertical-align:bottom но не помогает
    Изображения
    Последний раз редактировалось Martins; 08.01.2010 в 22:23.

  9. #9
    что никто не ответит?

  10. #10
    очень,зачастую возникающий вопрос:


    <div class="helper">
    </div>
    <div class="div1"></div>
    ...


    И вот CSS

    .div1 {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:bottom;
    border: 1px #FF0000 dotted;
    zoom:1;
    }
    .helper {
    display:-moz-inline-box;
    display:inline-block;
    vertical-align:middle;
    height:100%;
    }
    Всё гениально просто))) ГЛАВНОЕ ЗАХОТЕТЬ)))

+ Ответить в теме

Похожие темы

  1. Обтекание картинки текстом
    от Make в разделе CSS
    Ответов: 2
    Последнее сообщение: 18.03.2009, 15:14
  2. Ответов: 1
    Последнее сообщение: 05.12.2008, 12:56
  3. Ответов: 4
    Последнее сообщение: 26.08.2008, 20:55
  4. Обтекание
    от Langepas в разделе CSS
    Ответов: 5
    Последнее сообщение: 14.05.2008, 23:34
  5. Ответов: 8
    Последнее сообщение: 23.03.2008, 15:21

Метки этой темы

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения