你好堆栈溢出社区。我只是越来越擅长编码,这可能是我的第一个问题。我不能张贴图像,直到我达到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+ */
}

10-06 07:48
查看更多