2
Я пытаюсь использовать правило столбцов CSS для создания div с двумя столбцами текста и изображений. Я получил его, так что он прекрасно выглядит в Firefox и Safari, но он выглядит ужасно в Chrome. Я искал, как исправить эту ошибку, и попробовал добавить break-inside: auto;, но безрезультатно, поэтому я подумал, что посмотрю, может ли кто-нибудь здесь предложить предложение.Столбцы CSS в Chrome
Это сайт, на котором я работаю: link here. Вопрос находится в разделе под «История Института глобальных путей».
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 */
}