CSS - Заставьте отделения выровняться горизонтально

tl; dr: «PECS» находится с точки зрения коллекции. Если вы только вытаскиваете предметы из общей коллекции, это производитель, и вы должны использовать extends; если вы загружаете только элементы, это потребитель, и вы должны использовать super. Если вы делаете оба с одной и той же коллекцией, вы не должны использовать либо extends, либо super.


Предположим, что у вас есть метод, который принимает в качестве параметра набор вещей, но вы хотите, чтобы он был более гибким, чем просто принятие Collection<Thing>.

Случай 1: вы хотите пройти коллекцию и делать вещи с каждым элементом. Затем список будет производителем, поэтому вы должны использовать Collection<? extends Thing>.

. Поводом является то, что Collection<? extends Thing> может содержать любой подтип Thing, и поэтому каждый элемент будет вести себя как Thing ] при выполнении операции. (Фактически вы не можете добавить что-либо к Collection<? extends Thing>, потому что во время выполнения вы не можете знать, какой подтип [] Thing содержится в коллекции.)

Случай 2: вы хотите добавьте вещи в коллекцию. Затем список - это потребитель, поэтому вы должны использовать Collection<? super Thing>.

. Здесь рассуждение состоит в том, что в отличие от Collection<? extends Thing>, Collection<? super Thing> всегда может удерживать Thing независимо от того, какой фактический параметризованный тип является. Здесь вам все равно, что уже есть в списке, если он позволит добавить Thing; это то, что гарантирует ? super Thing.

81
задан Priyanga 14 October 2019 в 11:47
поделиться

3 ответа

Можно поместить внутреннее отделение в контейнер, который достаточно широк для содержания всех пущенных в ход отделений

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}
<div id="container">
  <div id="inner">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</div>
94
ответ дан Nhan 24 November 2019 в 09:39
поделиться

можно использовать clip свойство:

#container {
  position: absolute;
  clip: rect(0px,200px,100px,0px);
  overflow: hidden;
  background: red;
}

отмечают position: absolute и overflow: hidden необходимый, чтобы заставить clip работать.

5
ответ дан thanksd 24 November 2019 в 09:39
поделиться

Это кажется близко к тому, что Вы хотите:

#foo {
  background: red;
  max-height: 100px;
  overflow-y: hidden;
}

.bar {
  background: blue;
  width: 100px;
  height: 100px;
  float: left;
  margin: 1em;
}
<div id="foo">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>
5
ответ дан Nhan 24 November 2019 в 09:39
поделиться