你好堆栈溢出社区。我只是越来越擅长编码,这可能是我的第一个问题。我不能张贴图像,直到我达到10代表,所以我需要的图像代表在下面的链接。
https://6ff6bf8640d4ef91208a73a6d9d14f00ce70afa0.googledrive.com/host/0B667ouzaQ0tXbGQ5RXJFaHI2NlU/Stack%20Question%201.png
我已经创建了一个div class=“tile”。以及一个包含两列的移动html页面。每个“tile”div都有一个图像“img”和一个按钮“a ref”。我想把它们包装成瓷砖,而不是像图片上那样剪成一半。这是我的简化代码:
<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试图创建一个基于移动web的应用程序。
我可以使用JavaScript来强制它们结合在一起吗?不管你们怎么想都是最好的解决办法。我一直在网上搜索。和Stackoverflow
最佳答案
使用这个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+ */
}