確定css創建的列，並添加一個額外的列與javascript

Question

我一直在環顧四周報紙般的佈局，我想知道是否有一種方法來確定列（或列中斷）通過CSS或JavaScript和務實使用javascript在列之間添加內容。

基本的想法是，我有一個100％高度的佈局和列創建延伸到屏幕的右側像這裏：http://www.kaikkonendesign.fi/columns/而我想要的是，例如在第一列之後，我添加一個額外的列之間col＃1和＃2，並在該列中添加內容（圖片，額外鏈接...）

我知道如何用innerHtml添加javascript的內容，並且我找到了一種計算列數的方法（Get number of columns created by css column-width或How to get css3 multi-column count in Javascript），但我看不到如何獲得列或列的中斷類或ID以查看附加到我的html的位置。

是否可以用一些代碼對瀏覽器「在第1列添加另一列之後」或「第1列之後添加此內容的100％高度」或「第1列之後添加XXpx的空白區域（並顯示一個絕對定位的div）「例如？

下面是一個例子來說明：http://hpics.li/a99853b

編輯：這裏要求是一個快速撥弄着基本的HTML/CSS列：https://jsfiddle.net/p8ar0zpr/1/

<div class="example"> 
    <h1>Sed dignissim lacinia nunc</h1> 
    <p class="lead">Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
    <p>Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
    <p>Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
</div> 



.example { 
    -webkit-columns: 320px; 
    -moz-columns: 320px; 
    columns: 320px; 
    -webkit-column-gap: 2em; 
    -moz-column-gap: 2em; 
    column-gap: 2em; 
    height:95%; 
    padding:1em; 
} 
html{height:100%;} 
body { 
    font-size: 12px; 
    font-family: 'Georgia', serif; 
    font-weight: 400; 
    line-height: 1.45; 
    color: #333; 
    background: #ecf0f1; 
    padding: 0; 
    margin:0; 
    height:100%; 
} 

h1 { 
    font-size: 2em; 
    margin-bottom: 0.5em; 
    line-height: 1.2; 
} 

p { 
    margin-bottom: 1.3em; 
    text-align: justify; 
} 

.lead { 
    font-variant: small-caps; 
    font-size: 1.3em; 
    text-align: left; 
    font-style: italic; 
} 

感謝，

Answer 1

的方法你可以使用的是檢查每個p元素左上角的位置。每列頂部的p元素在頁面上會高於前一個元素。 （或在它之前不會有）。

這裏有一些可玩的東西。它只是突出顯示每列頂部的p。

window.addEventListener('load', onDocLoaded, false); 
 
HTMLCollection.prototype.forEach = Array.prototype.forEach; 
 

 
function onDocLoaded(evt) 
 
{ 
 
\t getColumnTops(); 
 
} 
 

 

 
function getColumnTops() 
 
{ 
 
\t // 1. get an HTMLCollection of all p elements in the page 
 
\t var paras = document.getElementsByTagName('p'); 
 

 
    // 2. step through the collection, checking items' Y pos on the page 
 
\t paras.forEach(checkPosition); 
 
} 
 

 
var lastValue = 1000000; // dummy value to ensure first one is detected. 
 
function checkPosition(elem, index, array) 
 
{ 
 
\t if (elem.offsetTop < lastValue) 
 
\t { 
 
\t \t // console.log(elem.offsetTop); 
 
\t \t elem.classList.add('colTop'); 
 
\t } 
 
\t lastValue = elem.offsetTop; 
 
}

.example { 
 
    -webkit-columns: 320px; 
 
    -moz-columns: 320px; 
 
    columns: 320px; 
 
    -webkit-column-gap: 2em; 
 
    -moz-column-gap: 2em; 
 
    column-gap: 2em; 
 
    height:95%; 
 
    padding:1em; 
 
} 
 
html{height:100%;} 
 
body { 
 
    font-size: 12px; 
 
    font-family: 'Georgia', serif; 
 
    font-weight: 400; 
 
    line-height: 1.45; 
 
    color: #333; 
 
    background: #ecf0f1; 
 
    padding: 0; 
 
    margin:0; 
 
    height:100%; 
 
} 
 

 
h1 { 
 
    font-size: 2em; 
 
    margin-bottom: 0.5em; 
 
    line-height: 1.2; 
 
} 
 

 
p { 
 
    margin-bottom: 1.3em; 
 
    text-align: justify; 
 
} 
 

 
.lead { 
 
    font-variant: small-caps; 
 
    font-size: 1.3em; 
 
    text-align: left; 
 
    font-style: italic; 
 
} 
 

 
.colTop 
 
{ 
 
\t background: rgba(200,0,0,0.25); 
 
}

<div class="example"> 
 
    <h1>Sed dignissim lacinia nunc</h1> 
 
    <p class="lead">1 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
 
    <p>2 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
 
    <p>3 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
 

 
    <p>4 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p> 
 

 
    <p>5 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p> 
 
    <p class="lead">6 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
 
    <p>7 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
 
    <p>8 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
 

 
    <p>9 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p> 
 

 
    <p>10 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p> 
 
    <p class="lead">11 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
 
    <p>12 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
 
    <p>13 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
 

 
    <p>14 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p> 
 

 
    <p>15 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p> 
 
    <p class="lead">16 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
 
    <p>17 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
 
    <p>18 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
 

 
    <p>19 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p> 
 

 
    <p>20 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p> 
 
    <p class="lead">21 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
 
    <p>22 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
 
    <p>23 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
 

 
    <p>24 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p> 
 

 
    <p>25 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p> 
 
    <p class="lead">26 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
 
    <p>27 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
 
    <p>28 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
 

 
    <p>29 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p> 
 

 
    <p>30 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p> 
 
    <p class="lead">31 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
 
    <p>32 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
 
    <p>33 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
 

 
    <p>34 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p> 
 

 
    <p>35 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p> 
 
    <p class="lead">36 Aenean quam. In scelerisque sem at dolor. Sed convallis tristique sem.</p> 
 
    <p>37 Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. </p> 
 
    <p>38 Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> 
 

 
    <p>39 Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. </p> 
 

 
    <p>40 Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. </p> 
 
</div>