CSS 列在 Safari Mac 中不起作用

Question

在这个网站：getinjuryanswers.com，我添加了 CSS 列。它在 Chrome 和 Firefox 中运行良好，但内容不会显示在 Mac 上的 Safari 中。任何想法为什么？

HTML：

<div class="twocolumns col-md-12">
<p class="representation-text">
<p class="representation-text">Many cases settle out of court, you therefore need an effective negotiator on your side. Attorney Curtis Quay spent several years defending insurance companies against personal injury claims. He understands how they think and the games they play to deny you compensation. This gives you the upper hand during the negotiation process.</p>
<p class="representation-text">To recover for a personal injury case, you must prove the defendant was responsible for your harm. ITL has a strong network of investigators and professionals in San Diego to help build your case and get you the proper compensation. Proving damages can be complicated, but our lawyers have a proven track record of excellent results.</p>
</div>

CSS：

.twocolumns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    /*column-count: 2;*/
    -webkit-column-gap: 30px;
    -moz-column-gap: 30px;
    /*column-gap: 30px;*/
}

Answer 1

Safari column-gap。这是一个应该达到相同效果的解决方法。由于您已经使用两个单独的元素来拆分内容。

.twocolumns {
 width: 100%;
}
.twocolumns .representation-text {
 width: 50%;
 float: left;
 vertical-align: top;
}
.twocolumns .representation-text:last-child {
 width: calc(50% - 30px);
 margin-left: 30px;
}

您可能还想删除空的<p class="representation-text">