Вопросы Теги

Баланс объектов по двум столбцам с использованием счетчика столбцов CSS: 2 в Chrome

в случае, если страница & amp; кадр не находится в одном домене, вам придется использовать postmessage , поскольку политика одного домена запрещает нормальную javascript-связь между страницами / кадрами разных доменов из-за проблем с безопасностью.

postmessage является частью html5, а работает во всех современных браузерах (включая IE8) . если вам нужна поддержка старых браузеров (в частности, IE6 / 7), вы можете использовать плагин postgessage jQuery (который прозрачно возвращается к некоторой хитрости тэгов хэш-тегов для старых браузеров).

и как побочный элемент: не уверены, что фреймы злы, есть некоторые проблемы (юзабилити, SEO, ...), связанные с ними, но я сделал некоторые исследования и большинство из них можно решить я думаю.

1
задан Jasper 16 January 2019 в 19:30
поделиться

2 ответа

Это распространенная проблема, обнаруженная в свойстве column-count. Для вашей проблемы вы можете использовать следующее решение, которое отлично работает с очень немногими css changes, а также я заметил, что в вашем вопросе вы дублировали идентификатор элемента, который приводит ваш HTML к недействительному. Так что избегайте этого в будущем, работайте с css classes. 

#container {
  overflow-y: auto;
  height: 300px;
  width: 400px;
  border: 1px solid black;
}

#columncontainer {
  /* column-count: 2;*/
  border: 1px solid red;
  width: 100%;
}

#columncontainer>span {
  /*width: 100%;*/
  display: inline-block;
  background-color: #CCCC;
  margin: 5px;
  border: 1px solid blue;
  width: calc(50% - 15px);
}

.block1,
.block2 {
  height: 200px;
  width: 200px;
}

.block3 {
  height: 50px;
  width: 200px;
}
<div id='container'>

  <div id='columncontainer'>
    <span id='span1' class="block1">Block1</span>
    <span id='span2' class="block2">Block2</span>
    <span id='span3' class="block3">Block3</span>
  </div>

</div>

0
ответ дан Ramesh 16 January 2019 в 19:30
поделиться

Оказывается, что в свойствах CSS Chrome значения «сироты» и «вдовы» по умолчанию установлены равными 2, тогда как другие браузеры, похоже, поддерживают значение 1.

Чтобы исправить проблему, которую я описал, необходимо добавить следующие свойства CSS в #columncontainer: 

orphans: 1
widows: 1

Это предотвратит попытку Chrome придерживаться одного столбца.

Для дальнейшего ознакомления:

Выдержка из drafts.csswg.org:

If a block contains fewer lines than the value of widows or orphans, the rule simply becomes that all lines in the block must be kept together.
0
ответ дан Jasper 16 January 2019 в 19:30
поделиться