Вопросы Теги

Проточные элементы вокруг друг друга в CSS Grid

Поскольку @mxmissile говорит в комментариях к принятому ответу, вы не должны вводить новый контроллер, потому что он будет отсутствовать зависимостями, установленными для IoC, и не будет иметь HttpContext.

Вместо этого вы должны получить экземпляр своего контроллера следующим образом: 

var controller = DependencyResolver.Current.GetService<ControllerB>();
controller.ControllerContext = new ControllerContext(this.Request.RequestContext, controller);
2
задан redbmk 13 July 2018 в 18:52
поделиться

2 ответа

Похоже, что самым простым решением этой проблемы будет использование старого старого свойства float, которое заставляет другие элементы обтекать данный элемент «из коробки». Единственное добавление, которое необходимо сделать, - это сделать разделы для создания нового контекста форматирования блоков, чтобы они не перекрывались с плавающим элементом (как это делают display: block элементы по умолчанию). Для этого есть несколько способов , включая стандартное (но, к сожалению, не кросс-браузерное) решение - display: flow-root. 

document.querySelector('button').addEventListener('click', () => {
  const aside = document.querySelector('aside');
  if (aside) {
    aside.remove();
  } else {
    document.querySelector('main').prepend(document.createElement('aside'));
  }
});

document.querySelector('a').addEventListener('click', (event) => {
  event.target.parentElement.classList.toggle('tall');
});
main {
  /* the display:flow-root alternative with the best balance
     between browser support and unwanted side effects (IMO).
     Other alternatives live comparison: https://codepen.io/SelenIT/pen/qrORXm */
  column-count: 1;

  padding: 5px 5px 0;
  margin: 5px;
  background-color: gray;
}

aside {
  height: 120px;
  width: calc((100% - 20px) * 0.4); /* 2/5 of (100% - 4 gaps of 5px each) */
  background-color: green;
  margin: 0 0 5px 5px;
  float: right;
}

section {
  column-count: 1;
  height: 20px;
  background-color: white;
  margin-bottom: 5px;
}

section.tall {
  height: 100px;
}
<button>Toggle Aside</button>
<main>
  <aside></aside>
  <section><a href="javascript://">Toggle Height</a></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

2
ответ дан Ilya Streltsyn 17 August 2018 в 12:14
поделиться

Примечание. Этот ответ на самом деле не работает. Я ошибался в том, как работает автоматическое размещение с названными сетками. Я оставляю его для справки.

Я бы использовал более простую сетку. Кажется, вы действительно не хотите равномерной сетки из 5 столбцов. что-то вроде: 

main {
  display: grid;
  padding: 5px;
  margin: 5px;
  grid-gap: 5px;
  background-color: gray;
  
  /*grid-template-columns: repeat(5, 1fr);*/
  grid-template: "a   aside"
                 "a   aside"
                 "a   aside"
                 "wide wide"
                 "wide wide"
                / 4fr 1fr;
}

aside {
  /* height: 120px; */
  background-color: green;
  
  /*grid-column: 4 / 6;*/
  /*grid-row: 1 / 4;*/
  
  grid-area: aside;
}

section {
  height: 20px;
  background-color: white;
  /* grid-column-end: span 5; */
}
<button>Toggle Aside</button>
<main>
  <aside></aside>
  <section><a href="javascript://">Toggle Height</a></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</main>

Документация MDN grid-template: https://developer.mozilla.org/en -US / Docs / Web / CSS / сетка-шаблон

0
ответ дан Mike Gossmann 17 August 2018 в 12:14
поделиться
  • 1
    Если я просто заменил grid-template-columns из моего примера на ваш grid-template, он все равно будет иметь те же проблемы. Я действительно не понимаю, как работают именованные разделы. Считаете ли вы, что можете переделать это на рабочий пример? – redbmk 13 July 2018 в 19:54
  • 2
    @redbmk Я расширил этот пример, но, судя по всему, я смутил способ размещения элементов в названных областях в сравнении с тем, как их автоматически размещает, поэтому на самом деле это не работает, как я думал. – Mike Gossmann 13 July 2018 в 20:40
  • 3
    Не беспокойтесь, спасибо за попытку! – redbmk 13 July 2018 в 20:43
Другие вопросы по тегам:

Похожие вопросы: