Nano Hash - криптовалюты, майнинг, программирование

Подходит ли плавающий div с разной высотой?

У меня есть простая демонстрация, чтобы проиллюстрировать мою проблему.

http://www.ttmt.org.uk/forum/index.html

Это отзывчивый макет div, который плавает для создания 3 столбцов.

Элементы div имеют разную высоту, поэтому, когда элемент div идет после элемента div, который выше, он перемещается вниз в следующем столбце. Например. Заголовок3 и Заголовок4.

Можно ли совместить div с разной высотой.

У меня есть изображение здесь, чтобы проиллюстрировать желаемый макет. Порядок элементов div не имеет значения, если они подходят друг другу.

http://www.ttmt.org.uk/forum/1.png

Заранее спасибо за муравьиную помощь.

    <!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <title>Title of the document</title>

      <style type="text/css">
        *{
          margin:0;
          padding:0;
        }

        body{
            font:10px 'Source Sans Pro', sans-serif;
            font-size:100%;
            font-size:1.02em;
            color:#555;
        }
        #pageWrap{
            max-width:1135px;
            margin:0 auto;
            border-left:40px solid white;
            border-right:40px solid white;
        }

        /*---------------------
            sec-sevice
        ----------------------*/    
        #sec-service{
            padding:0 0 230px 3.52422907488987%;
            margin:30px 0 0 0;
        }

        #sec-service .service{
            float:left;
            width:29.68036529680365%;
            background:#ccc;
            margin:0 3.65296803652968% 6px 0;
        }
        .service h3{
            font-weight:700;
            font-size:1.1em;
            padding:10px 0;
        }
        .service p{
            padding:0 0 10px 0;
            margin:0 0 10px 0;
        }

        /*---------------------
            Media queries
        ----------------------*/
        @media only screen and (max-width:880px){

            #sec-intro p,
            #sec-service .service{
                width:100%;
                float:none;
            }
        }

      </style>


      </head>

    <body>

      <div id="pageWrap">

        <section id="sec-service" class="group">

          <div id="serviceText" class="group">

            <div class="service">
              <h3>Heading 1</h3>
              <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>

            <div class="service">
              <h3>Heading 2</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
              </p>
            </div>

            <div class="service">
              <h3>Heading 3</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 

              </p>
            </div>

            <div class="service">
              <h3>Heading 4</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

              </p>
            </div>

            <div class="service">
              <h3>Heading 5</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>

            <div class="service">
              <h3>Heading 6</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

              </p>
            </div>

            <div class="service">
              <h3>Heading 7</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
              </p>
            </div>

          </div>

        </section>  

      </div><!-- #pageWrap -->

    </body>

    </html>
html layout css multiple-columns
14.02.2013

Ответы:


1

Как упоминал Aspiring Aqib, вы можете использовать плагин Masonry jQuery.

Но вы также можете сделать это с помощью простого шаблона CSS:

HTML

<div class="column">
    <div class="box">1 Lorem Ipsum</div>
    <div class="box">4 Lorem Ipsum Lorem</div>
    <div class="box">7 Lorem Ipsum</div>
</div>
<div class="column">
    <div class="box">2 Lorem Ipsum Lorem Ipsum</div>
    <div class="box">5 Lorem Ipsum</div>
    <div class="box">8 Lorem Ipsum</div>
</div>
<div class="column">
    <div class="box">3 Lorem Ipsum</div>
    <div class="box">6 Lorem Ipsum</div>
</div>

CSS

.box { 
    width: 50px;
    min-height: 50px;
    background: #ccc;
    margin: 3px;
    padding: 3px;
    float: left;
}
.column {
    width:60px;
    float: left;
}

Рабочий jsFiddle здесь

14.02.2013
Новые материалы
Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
Как написать эффективное резюме
Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..