Question

Hello Stack溢出社区。我正在改进编码，这可能是我的第一个问题。我不能发布图像，直到达到10个代表，所以我需要的图像表示在下面的链接中。

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

我创建了一个div class =“tile”。和一个包含两列的移动html页面。每个“tile”div具有图像“img”和按钮“a 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

Answer 1

使用此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+ */
}

Answer 2

为display:inline-block

设置.columns

Answer 3

您可以使用表格将它们并排放置在图像中......

<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>

Answer 4

将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"这样的语义标记。

如何在两列页面中停止div换行

4 个答案: