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

Hello Stack overflow community.我只是在编码方面变得更好，这可能是我许多问题中的第一个。在达到 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 尝试创建一个基于 Web 的移动应用程序。

我可以使用JavaScript来强迫它们粘在一起吗？无论你们认为什么都是最好的解决方案。我一直在网上搜索。和堆栈溢出

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

为.columns设置display:inline-block

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

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

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

相关内容

最新更新

热门标签：