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

Равные интервалы div в контейнере

Вот мой пример: http://jsfiddle.net/rtCP3/62/

У меня есть 3 (или более!) div, которые я хочу разместить одинаково в одном контейнере. При использовании angular с ng-repeat стили не подхватываются. Когда я жестко кодирую одни и те же элементы, все работает отлично.

Угловой выход:

<div class="container ng-scope" ng-controller="ParentCtrl">
     <!-- ngRepeat: item in list -->
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item1</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item2</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item3</div>
     <div class="box ng-scope ng-binding" data-ng-repeat="item in list">item4</div>
     <span class="stretch"></span>
</div>

Жестко запрограммировано:

<div class="container">
    <div class="box">Item 1</div>
    <div class="box">Item 2</div>
    <div class="box">Item 3</div>
    <div class="box">Item 4</div>
    <span class="stretch"></span>
</div>

Я основывал это на этом вопросе о стеке: Ширина жидкости с равными интервалами DIV

html css angularjs
28.02.2013

  • Я смог сделать поля намного ближе друг к другу (без каких-либо других очевидных проблем), удалив CSS выравнивания текста. 28.02.2013
  • Это не то, что я хочу, см. ссылку на другой вопрос о стеке. 28.02.2013

Ответы:


1

Это работает. Я не уверен, почему, но это то же самое:

 <div class="container" ng-controller="ParentCtrl">
     <span data-ng-repeat="item in list">
         <div class="box">{{ item.name }}</div>
     </span>
     <span class="stretch"></span>
 </div>

Может быть, кто-то еще может объяснить, почему это работает, но в вашей скрипке повторение элемента span, но с классом box внутри сделало обе реализации одинаковыми.

28.02.2013
  • +1. Я не понимаю, почему это работает / почему это не работает с самого начала, но это решает проблему. 28.02.2013
  • Мэтью, удали и CSS для выравнивания текста. Тогда это работает: jsfiddle.net/wagedomain/wtWV6 28.02.2013
  • Вот скрипт, который я изменил для проверки, jsfiddle.net/SC34z (версия Chrome 25.0.1364.97). ). 28.02.2013
  • Ах, в html, который вы разместили, вы не указали span class=Stretch Можете ли вы добавить это, и я приму это? Благодаря тонну! 28.02.2013
  • Конечно. На самом деле я удалил span = stretch из моей скрипки и изменил CSS для того же эффекта, но я могу добавить его обратно. 28.02.2013

    • 2

    Комментарий в вопросе SO, на который вы ссылаетесь, говорит

    Мне потребовалось 3 часа, чтобы найти пробелы между каждым полем в html. «Justify» расширяет пробелы между элементами, и если ваш контент <div/><div/><div/>, он не работает. Вам нужно иметь <div/> <div/> <div/>.

    Я считаю, что ng-repeat не ставит пробелов между своим выводом, поэтому все элементы div находятся прямо друг против друга, вызывая проблему.

    Вы можете создать свою собственную директиву, подобную ng-repeat, которая добавит пробел.

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