Неправильное отображение выравнивания в Chrome, Safari и Edge, но в Firefox - PullRequest
Новая
       41

Неправильное отображение выравнивания в Chrome, Safari и Edge, но в Firefox

0 голосов
/ 22 мая 2018

У меня есть div, использующий метод display flex, который содержит другие div, также использующий display flex, чтобы получить правильное выравнивание, которое я хочу.Я обычно разрабатываю свои веб-страницы, используя Firefox, а затем тестирую их в других браузерах, чтобы посмотреть, правильно ли они там работают / отображаются.

Я хочу иметь суперконтейнер, который упорядочивает свои элементы в нормальном потоке.Эти предметы содержат два изображения.Эти изображения расположены рядом друг с другом, и только их ширина фиксирована.Высота может отличаться в зависимости от предмета.Под этими двумя изображениями я размещаю немного текста.Все элементы выровнены так, что первая строка текстов выровнена друг с другом.Изображения должны быть помещены в горизонтальную середину элемента.

Следующее изображение показывает, как я хочу, чтобы оно отображалось: Правильное отображение Firefox .В Chrome и Edge (и Safari на iOS) изображение выглядит следующим образом: Неправильное отображение .

У меня есть следующие HTML и CSS: 

.CompleteContainer
{
  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;
}

.ItemContainer
{
  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;
}

.ItemTopContainer
{
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.ItemTopLeftContainer
{
  align-items: flex-end;
  background-color: #ff8888;
  display: flex;
  justify-content: flex-end;
  width: calc(50% - 2px);
}

.ItemTopLeft
{
  background-color: #ff0000;
  height: 50px;
  width: 50px;
}

.ItemTopRightContainer
{
  align-items: flex-end;
  background-color: #88ff88;
  display: flex;
  justify-content: flex-start;
  width: calc(50% - 2px);
}

.ItemTopRight
{
  background-color: #00aa00;
  height: 25px;
  width: 50px;
}

.ItemBottomContainer
{
  text-align: center;
}
<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>

Что я делаю не так или чего мне не хватает, чтобы получить отображение в Chrome и Edge так же, как в Firefox?Для ясности: в Firefox приведенный выше фрагмент кода дает нужные мне результаты, в Chrome и Edge (и Safari на iOS) они ошибочны.

ОБНОВЛЕНИЕ: Мне пока не разрешенокомментируйте ответы напрямую, но я сделаю это так.Оба ответа указали мне правильное направление, хотя они не дали правильных результатов, которые я хотел.Я обновил код в этом вопросе, чтобы отразить изменения в CSS для создания нужного макета.

Ответы [ 2 ]

0 голосов
/ 22 мая 2018

Я изменил ваш код ниже и включил документацию в источник.Вытащил поплавки.Обратите внимание, что поплавки не работают внутри flexbox. 

.CompleteContainer
{
  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;
}

.ItemContainer
{
  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;
}

.ItemTopContainer
{
  width: 100%;
  display: flex; /* Added */
}

.ItemTopLeftContainer
{
  align-items: flex-end; 
  display: flex;
  height: 100%;
  /* justify-content: right; "right" does not exist. */
  width: calc(50% - 2px);
}

.ItemTopLeft
{
  background-color: red;
  height: 50px;
  width: 50px;
}

.ItemTopRightContainer
{
  align-self: flex-end; /* Replacing align-items */
  /* Not necessary
  display: flex;
  height: 100%;
  justify-content: left;
  */
  width: calc(50% - 2px);
}

.ItemTopRight
{
  background-color: green;
  height: 25px;
  width: 50px;
}

.ItemBottomContainer
{
  text-align: center;
}
<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>
0 голосов
/ 22 мая 2018 

.CompleteContainer
{
  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;
}

.ItemContainer
{
  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;
}

.ItemTopContainer
{
  width: 100%;
  display: flex;
  align-items: center;
}

.ItemTopLeftContainer
{
  align-items: flex-end;
  display: flex;
  float: left;
  height: 100%;
  justify-content: right;
  width: calc(50% - 2px);
}

.ItemTopLeft
{
  background-color: red;
  height: 50px;
  width: 50px;
}

.ItemTopRightContainer
{
  align-items: flex-end;
  display: flex;
  float: right;
  height: 100%;
  justify-content: left;
  width: calc(50% - 2px);
}

.ItemTopRight
{
  background-color: green;
  height: 25px;
  width: 50px;
}

.ItemBottomContainer
{
  text-align: center;
}
<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>
...