На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: Vasya2000, Serafim, fatalist
  
> Несколько елементов div в одну строку , Как это сделать.
    Нужно разместить N-нное количество div (фиксированных размеров) на странице.
    Следующем образом: все что помещаются в одну строку (ну там 2, 3 в зависимости от разрешения экрана)- выводить в строку, дальше с новой строки и т.д.

    Пробовал стилями играть с float. Получается не то. Либо каждый элемент с новой строки -- либо все в одну. При этом ширина страницы неимоверно увеличиватсся с появления длиннющей полосы прокрутки.
    При этом float кажеться мне не совсем логичным, посколько только для первого элемента я знаю, что обтекание будет справа, а для второго может быть как с обеих сторон, так и только слева. (в зависимости сколько элеметнов помещается в одну строку)
    Кое-что удалось, но появились проблемы с самим содержимым элементов.
      Вот мой код работает правильно, все динамически выстраивается (тоесть при изменении размера окна блоки сдвигаются постепенно вниз).
      ExpandedWrap disabled
        <html>
          <head>
              <title>Blank</title>
        <style>
        .blocks{
          border:1px solid red;
          width:300px;
          height:300px;
          float:left;
        }
         
        </style>
          <head>
          <body>
            <div class="blocks">Text</div>
            <div class="blocks">Text</div>
            <div class="blocks">Text</div>
            <div class="blocks">Text</div>
            <div class="blocks">Text</div>
         </body>
        </html>


      Добавлено
      Да а какой контент будет в этих дивах, просто для понимания, почему обтекание у них будет с разных сторон.
      Сообщение отредактировано: inkoGnitoo -
        Ігор у контейнера ширина ограничена?
        Цитата Ігор @
        При этом float кажеться мне не совсем логичным, посколько только для первого элемента я знаю, что обтекание будет справа, а для второго может быть как с обеих сторон, так и только слева
        "не верю" ©

        inkoGnitoo, поправь название класса
          zera
          Спасибо! не заметил :)
            Вопрос похожий, поэтому не стал создавать новую тему.
            Ситуация похожа на предидущую. Нужно так само в несколько столбиков вывести текст.

            Цитата
            11111111 333333333 22222222222
            22222222 333333333 55555555555

            Реешил воспользоваться <span style='width: 200px'> Но это ровным счётом ничего не дало. Все элементы выводились встык.
            После доглих проб удалось выяснить что причиной этому было объявление
            Цитата

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            После того, как я убрал все начало выводиться должным образом. Как узнать, какие ещё ограничения накладыват XHTML?
            и когда какой тип применим???
              Цитата
              Как узнать, какие ещё ограничения накладыват XHTML? и когда какой тип применим???

              Наверное стоит почитать спецификацию. XHML1 XHTML2
                По-моему, это не совсем то, что мне нужно.
                Ограниения наложены на сами стили.
                Скажем с DTD = 'strict' Невозможно изменить цвет полосы прокрутки,
                при этом также, игнорируются значения width height для многих элементов.
                Не могу понять, какие преимущества дает XHTML, если он накладывает определенные ограничения на возможность применения стилей и тэгов?
                  Цитата Ігор @
                  Скажем с DTD = 'strict' Невозможно изменить цвет полосы прокрутки
                  фактически нельзя и без деклараций. в опере дано на откуп юзверю, в фф, насколько мне известно, невозможно.
                  Цитата Ігор @
                  игнорируются значения width height для многих элементов.

                  можно пример? ни разу подобного не замечал. или вы о inline-элементах?
                  Цитата Ігор @
                  Не могу понять, какие преимущества дает XHTML, если он накладывает определенные ограничения на возможность применения стилей и тэгов?
                  кстати, это одно из преймуществ
                    Цитата zera @
                    или вы о inline-элементах?

                    о <span>
                    Цитата zera @
                    кстати, это одно из преймуществ
                    :huh: Не понял, какое же это преимущество, если нельзя использовать определенные стили и тэги?
                      Цитата Ігор @
                      Не понял, какое же это преимущество, если нельзя использовать определенные стили и тэги?

                      для inline компонента понятие высота и ширина не имеет смысла. есть div, есть, на худой конец, span style="display:block". корень вашей проблемы в недостаточном понимании стандарта. ежели почитать и разобраться, то исчезнет проблема о которой вы говорите (потому что это и не проблема)
                        Хорошо, тогда обьяснити как вывести N-нное количество слов в несколько колонок (количество в зависимости от разрешения экрана) (#5)
                          Цитата Ігор @
                          Хорошо, тогда обьяснити как вывести N-нное количество слов в несколько колонок (количество в зависимости от разрешения экрана) (#5)

                          непонятная задача. решается целой кучей вариантов, в зависимости от того, чего действительно нужно добиться. например, конкретный случай с конкретной постановкой задачи, решается таблицой, которая специально придумана для вывода таблиц.
                            Таблица хороша, когда точно изветстно количество колонок.
                            Если в строку помещается 3 колонки, нужно вывести слова в 3 колонки, а если разрешение экрана больше, тогда соответственно 5 или 6 колонок.
                              Ігор, так это уже совсем другая задача. у меня даже пример в загашнике есть
                              ExpandedWrap disabled
                                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                                <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US" dir="ltr">
                                <head>
                                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
                                  <title>Test screen</title>
                                  <script type="text/javascript">
                                  </script>
                                  <style type="text/css">
                                  html, body {
                                          height: 100%;
                                          width: 100%;
                                  }
                                  .container {  }
                                  .data {
                                          width: 200px;
                                          border: 1px solid black;
                                          margin: 1px;
                                          background-color: cyan;
                                          float: left;
                                  }
                                  </style>
                                </head>
                                <body>
                                  <div class="container">
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                    <div class="data">111</div>
                                  </div>
                                </body>
                                </html>

                              оно?
                                Подозреваю, что ему нужно, чтобы слова шли сверху вниз, потом переходили во вторую колонку и т.д.
                                  Цитата amk @
                                  Подозреваю, что ему нужно, чтобы слова шли сверху вниз, потом переходили во вторую колонку
                                  видимо твой хрустальный шар круче, чем мой. в условиях задачи подобной постановки не нашел.
                                  да не, нелогично.
                                  Цитата Ігор @
                                  Если в строку помещается 3 колонки, нужно вывести слова в 3 колонки, а если разрешение экрана больше, тогда соответственно 5 или 6 колонок.
                                    просто он пишет "колонки". Это в общем то и означает вертикальное упорядочение.
                                    Кроме того это всего лишь подозрение
                                      0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
                                      0 пользователей:


                                      Рейтинг@Mail.ru
                                      [ Script execution time: 0,0396 ]   [ 16 queries used ]   [ Generated: 28.03.24, 20:19 GMT ]