Question

我正在尝试为网站创建一个双列布局，并且我在Chrome，FireFox和IE10 / 11中都能正常运行，但在Safari中，新闻广告已经过列，而不是每行坐两个，就像他们应该的那样。

附上两张图片，顶部显示了我想要实现的内容（以及我在Chrome / FireFox / IE10和11上看到的内容），底部显示了Safari中发生的情况

我用来实现此目的的CSS如下：

.news__listing {
    float: left;
    display: block;
    margin-right: 3.84615%;
    width: 65.38462%;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    box-direction: normal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    box-lines: multiple;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -moz-box-align: start;
    box-align: start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
    align-items: flex-start;
    -ms-flex-align: start; }
    .news__listing:last-child {
      margin-right: 0; }
    .news__listing:nth-child(2n) {
      margin-right: 0; }
    .news__listing:nth-child(2n+1) {
      clear: left; }

.news__listing .c-article {
      max-width: 50%;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      box-orient: vertical;
      -webkit-box-direction: normal;
      -moz-box-direction: normal;
      box-direction: normal;
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column;
      -ms-flex-direction: column;
      -webkit-flex-shrink: 0;
      -moz-flex-shrink: 0;
      flex-shrink: 0;
      -ms-flex-negative: 0; }

我做了什么明显的错误吗？

Answer 1

好的，经过多次实验，我似乎找到了解决方案 - 似乎只是设置max-width并没有将其删除，所以我必须明确设置width: 50%;让一切正常对齐。

Flexbox在Safari中创建所有列

1 个答案: