如何在兩個colomn頁面中停止div換行

Hello堆棧溢出社區。我在編碼方面做得越來越好，這可能是我的第一個問題。我不能發佈圖像，直到我達到10代表，所以我需要的圖像表示是在下面的鏈接。如何在兩個colomn頁面中停止div換行

https://6ff6bf8640d4ef91208a73a6d9d14f00ce70afa0.googledrive.com/host/0B667ouzaQ0tXbGQ5RXJFaHI2NlU/Stack%20Question%201.png

我創建了一個DIV CLASS = 「板磚」。和一個包含兩列的移動html頁面。每個「瓷磚」div有一個圖像「IMG」和一個按鈕「HREF」。我希望它們能夠像瓷磚一樣包裹，而不是將它們切割成圖像中的一半。這裏是我的簡化代碼：

<hmtl> 

<body> 

<div class="2 columns"> 

<div class="tile"> 
<h3 ><img class="tileimg " src="anyimage"></h3> 
<button>More</button> 
</div> 


<div class="tile"> 
<h3 ><img class="tileimg " src="anyimage"></h3> 
<button>More</button> 
</div> 

</body> 


</html> 

<style> 
.2 column{  
-webkit-column-count: 2; 
-moz-column-count: 2; 
column-count: 2;} 
</style>

瓷磚被分成兩部分，但我只是希望他們粘在一起。我正在使用HTML。 CSS。 Javacrpt和Jquery以及Jquery mobile.1.4.5試圖創建一個基於移動網絡的應用程序。

我可以用JavaScript強制它們粘在一起嗎？無論你們認爲什麼是最好的解決方案。我一直在網上搜索。和Stackoverflow

來源

2014-11-21 Orlando Silva

使用此CSS。它告訴盡最大努力不要在瓷磚內部破碎，這樣兩個元素就會堆積在一起。在http://css-tricks.com/almanac/properties/b/break-inside/

.tile{ 
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ 
    page-break-inside: avoid; /* Firefox */ 
    break-inside: avoid; /* IE 10+ */ 
}

來源

2014-11-21 07:12:58 Salketer

這解決了這個問題！大謝謝戰士！ – 2014-11-21 08:43:43

發現設爲display:inline-block爲.columns

來源

2014-11-21 07:14:45

您可以使用表來把它們並排的圖像中...

<table> 
<tr> 
<td> 
<div class="tile"> 
<h3 ><img></h3> 
<button>More</button> 
</div> 
</td> 
<td> 
<div class="tile"> 
<h3 ><img></h3> 
<button>More</button> 
</div> 
</td> 
</tr> 
</table>

來源

2014-11-21 07:15:45 Pedi

設置display: inline-block;的瓷磚。

<div class="tiles"> 
    <div class="tile">...</div> 
    <div class="tile">...</div> 
    ... 
</div>

.tiles { 
    column-count: 2; 
    ... 
} 
.tile { 
    display: inline-block; 
}

列通過在他們認爲必要的流內容的任何自動換行基本工作。通過告訴他們瓷磚是inline-block（即內聯元素），你基本上說整個瓷磚就像是一個「字母」或一個「單詞」 - 一個流行內容的「線條」上的一個不可破壞的項目。

在旁註中，HTML和CSS中的類不匹配。我建議不要使用數字，而是建議使用class="columns columns-2"之類的東西，或者（更好）使用class="tiles"之類的語義標記。

來源

2014-11-21 07:23:20 hon2a

如何在兩個colomn頁面中停止div換行

回答

相關問題