相关疑难解决方法(0)
使用flexbox的响应式磁贴布局
我想创建一个tile布局(类似于metro风格的tile布局或者它叫做Windows 8).所以我有一些瓷砖/盒子,有些是二次的,有些可以是两倍和二次,有些可以有两倍的宽度.到目前为止一切都那么好,但是我有一个响应性的问题,我认为flexbox会为我解决......但也许我错了.
目前这些盒子是这样的(箭头显示盒子应该"流动"):
但是我希望它们看起来像这样:
或者甚至是这个,如果一个大瓷砖放在中间的某个地方(注意:编号也可能有点不同,例如,大瓷砖左边的方框可能是1-4,然后大瓷砖可能是5号,如果这更容易做到):
这是我目前的代码(参见http://codepen.io/anon/pen/oXmraK):
<div class="container">
<div class="bigbox">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
<div class="box">Box 6</div>
<div class="box">Box 7</div>
<div class="widebox">Box 8</div>
<div class="box">Box 9</div>
<div class="box">Box 10</div>
<div class="box">Box 11</div>
<div class="box">Box 12</div>
<div class="box">Box 13</div>
<div class="box">Box 14</div>
<div class="box">Box 15</div>
<div class="box">Box 16</div>
<div class="box">Box 17</div>
<div class="box">Box 18</div>
<div class="box">Box 19</div>
</div>
和CSS:
.container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start; …推荐指数
解决办法
查看次数
CSS多个不同高度的左浮动元素排列在2列中
这是空白的问题：我有多个float：left元素，需要将它们排列为2列，而且它们的高度都不同。
为了简化操作，我需要图片中的元素3紧接元素1之后。
我100％使用的是Plain，例如Vainilla CSS和AngularJS。我想避免使用任何JS模块，因为这些元素几乎永久地被加载和重新加载。最重要的是：100％需要避免使用Jquery。
重要更新：
无法使用float：left，float：right方式（如果孩子是偶数或奇数）：将 多个固定宽度/高度可变的框浮动到2列中
重要更新：
在某些情况下，我确实需要仅应用2个元素，一个在另一个的底部。所以我想将属性应用于元素1。
推荐指数
解决办法
查看次数
CSS中不同高度块的垂直对齐
我正在尝试实现与此类似的效果。也就是说，我有一些articles具有相同宽度但可以具有不同高度的块（此处为），并且我希望它们靠近它们的上邻居。内嵌显示文章并使用顶部垂直对齐时，文章仍按预期保持在其行上：
<html>
<head>
<style>
article { display: inline-block; vertical-align: top; width:200px; margin:5px; background-color:#D0D0D0; }
</style>
</head>
<body>
<div style="width:630px; background-color:#F0F0F0">
<article style="height:100px;"></article><article style="height:200px;"></article><article style="height:300px;"></article><article style="height:200px;"></article><article style="height:200px;"></article><article style="height:100px;"></article>
</div>
</body>
</html>
我想如果我将文章设置为预定义的列然后在此列中垂直对齐会更容易，但 AFAICT 在上面给出的示例中并非如此（可能具有能够动态更改列数的优势） .
这甚至可以在 CSS 中做到这一点吗？或者他们是否使用一些复杂的 JavaScript 来实现这一点？
（另外作为旁注，我需要articles彼此相邻而没有换行符，以防止中间出现虚假的空白，但这在上面的页面中似乎不是问题）。
编辑
我链接的页面的一个重要行为是我没有提到的，文章的显示顺序或多或少与它们列出的顺序相同，因此例如保留了时间顺序。
推荐指数
解决办法
查看次数
显示 3 个 div，2 个放在一起，第三个在第一个下面
好吧，我想像这样显示 3 个 div：
[ DIV 1 ] [ ]
[ ] [ DIV 2 ]
[ DIV 3 ] [ ]
但是，由于某种原因，会发生这种情况：
[ DIV 1 ] [ ]
[ ] [ DIV 2 ]
[ ]
[ DIV 3 ]
有一个 JSFiddle 显示了我的意思：https ://jsfiddle.net/4mmdamak/
并且有一个使用位置相对和负边距顶部的可能解决方案：https : //jsfiddle.net/4mmdamak/1/
我不想使用边距顶部，因为我不知道第二个 div 的高度，所以，我不知道第三个 div 需要上升多少像素。
另外，我尝试vertical-align: top;在第三个 div 上使用，但这没用。
PD：我不能把第三个 div 放在第一个 div 里面。
PD2：此外，我无法创建带有两个 td 标记且行跨度为 2 的表。
所以，如果您有任何其他解决方案......谢谢！
推荐指数
解决办法
查看次数