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

css li обтекают друг друга (изображение прилагается)

Я работаю над своим приложением для заметок, и я застрял с макетом. Ссылка на скриншот макета.

Каждый из блоков может иметь разную высоту в зависимости от текста в базе данных. Каждый из блоков представляет собой LI (размер начальной загрузки span3).

  • Мне нужно, чтобы коробки красиво обтекали друг друга без пробелов.

  • Я видел, что некоторые веб-страницы вычисляют абсолютное позиционирование в PHP для каждого из полей, но я надеюсь, что смогу добиться этого только с помощью CSS.

Пока структура следующая:

<ol>
 <li class="memPersonUnit clearfix span3">
  <div class="memPersonUnitContainer clearfix">

            THE CONTENT

  </div>
 </li>
</ol>

CSS-стиль:

  • у ol есть display: block;
  • li имеет дисплей: положение: относительное; float:left (унаследовано от размера SPAN3);
  • div имеет границу: 1px серый сплошной;

Как мне изменить свой css для достижения моей цели?

Если мне нужно использовать вычисления PHP, как мне поступить?

php css twitter-bootstrap
09.04.2013

Ответы:


1

На самом деле вы не сможете добиться этого только в css, если не создадите отдельные столбцы своих блоков контента, но это не сработает, если вы добавляете контент динамически.

Наиболее распространенный способ добиться того, чего вы хотите, — это использовать плагин jQuery под названием Masonry.

http://masonry.desandro.com/

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