Chrome中的CSS列
问题描述：
我正在尝试使用CSS列规则创建带有两列文本和图像的div。我已经知道它在Firefox和Safari中看起来很棒，但它在Chrome中看起来非常可怕。我已经四处寻找如何解决这个错误，并尝试添加break-inside: auto;，但无济于事，所以我想我会看看这里有没有人可能会有一个建议。Chrome中的CSS列
这是我正在从事的网站：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 */
}
答
.history-content{
-webkit-column-gap: 10px;
}
变化在这个类和值尝试