html - Chrome 中的 CSS 列

Question

我正在尝试使用 CSS 列规则创建一个包含两列文本和图像的 div。我把它记下来了，所以它在 Firefox 和 Safari 中看起来很棒，但在 Chrome 中看起来很糟糕。我四处寻找如何修复此错误并尝试添加 break-inside: auto; ，但无济于事，所以我想看看这里是否有人可以提出建议。

这是我正在处理的网站:link here.这个问题在“全局路径研究所的历史”下面的 div 中。

HTML:

<div class="history-content">
    <p>The Global Pathways Institute was launched in June, 2014, and is based at Arizona State University. It is directed by William C. Symonds, who gained international recognition as the primary author of the Pathways to Prosperity report, which was issued by the Harvard Graduate School of Education in 2011. The Institute grew out of the vision for preparing all youth for success that was first expressed in this landmark report.</p>
    <p>The report highlighted our national failure to prepare many young Americans to lead successful lives as adults. It argued that we could reverse this failure if we worked together to forge pathway systems that would more effectively prepare young people for economic independence.</p>
    <p>The report advanced three primary strategies for creating such systems: (1) providing all youth with multiple pathways to success; (2) engaging employers in these pathways systems; and (3) developing a “new social compact” with young people, aimed at equipping them with the education and experience needed to lead successful lives as adults.</p>
    <img src="http://lindseybakermedia.com/design/GPI/wp-content/uploads/2015/03/asu_explore.png" alt="Arizona State University campus - Explore">
</div>

CSS:

.history-content { 
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}

.history-content p {
    break-inside: auto; /* W3C */
    -webkit-column-break-inside: auto; /* Safari & Chrome */
    -moz-column-break-inside: auto; /* Firefox */
    -ms-column-break-inside: auto; /* Internet Explorer */
    -o-column-break-inside: auto; /* Opera */
}

Answer 1

   .history-content{
     -webkit-column-gap: 10px;
   }

改变这个类中的值并尝试