Chrome 77.0.3865.90 испортил макет с помощью поля слева: -100% - PullRequest
0 голосов
/ 26 сентября 2019

    body {
        min-width: 660px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
    }

    #container {
        padding-left: 200px;      /* LC fullwidth */
        padding-right: 230px;     /* RC fullwidth + CC padding */
    }

    #container .column {
        position: relative;
        float: left;
    }

    #center {
        padding: 15px 15px;       /* CC padding */
        width: 100%;
    }

    #left {
        width: 200px;             /* LC width */
        padding: 0 0px;           /* LC padding */
        right: 230px;             /* LC fullwidth + CC padding */
        margin-left: -100%;
    }

    #right {
        width: 170px;             /* RC width */
        padding: 0 15px;          /* RC padding */
        margin-right: -100%;
    }
<html>
  <head>
  </head>
  <body>
    <div id="container">
      <div id="center" class="column">CENTER</div>
      <div id="left" class="column">LEFT</div>
      <div id="right" class="column">RIGHT</div>
    </div>
  </body>
</html>

Я поддерживаю сайт, который работал годами.Внезапно макет в Chrome не работает: левый столбец исчезает, а правый столбец появляется под центральным столбцом.Все еще отлично работает в Firefox.CSS использует margin-left: -100%.Ищете предложения для лучшего способа сделать это?(И интересно, изменился ли Chrome в лучшую или худшую сторону?) Спасибо

1 Ответ

0 голосов
/ 27 сентября 2019

Спасибо Крис В. .Это поставило меня на правильный путь.Все еще любопытно, изменился ли Chrome, но не о чем беспокоиться.

    #container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
    }

    #center {
        order: 2;
    }

    #left {
        order: 1;
        flex-shrink: 3;
    }

    #right {
        order: 3;
        flex-shrink: 3;
    }
<html>
  <head>
  </head>
  <body>
    <div id="container">
      <div id="center" class="column">CENTER</div>
      <div id="left" class="column">LEFT</div>
      <div id="right" class="column">RIGHT</div>
    </div>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...