2015-03-13 29 views
2

我正在嘗試使用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 */ 
} 

回答

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

變化在這個類和值嘗試