内嵌块元素问题

我试图制作一个类似于“地铁”设计的屏幕原则上。内嵌块元素问题

我在做的方式是所有的元素都是相同的宽度，但不是相同的高度。然后他们应该全部对齐顶部，并找出哪里有空闲空间，不会在它们上面留下任何空间。

我遇到的问题是，如果我设置的元素，inline-block的他们提供这样的： enter image description here

如果我将它们设置为浮动，一边期待权，但另一个没有。下面是两个浮动：左和float：右： enter image description here

下面是一个例子的小提琴： http://jsfiddle.net/paulocoelho/2qyrp/

梓代码：

div{ 
    display:inline-block; 
    vertical-align:top; 
    margin:1px; 
    /*float:left;*/ 
} 

.smallBlock{ 
    height:50px; 
    width:50px; 
    background:blue; 
} 
.largeBlock{ 
    height:90px; 
    width:50px; 
    background:red; 
}

来源

2013-06-01 PCoelho

我也在寻找非JS解决方案...... – PCoelho

大瓷砖是否必须垂直拉长？ Windows 8风格将是水平的。 – lurker

我认为Windows 8块可以拉长两种方式（垂直和水平）。对于这个例子，高度是可变的，但宽度是固定的。 – PCoelho

假设您希望这是动态的，那么只能使用CSS3，使用多列，并且如果您需要响应，您需要媒体查询。

我发现了一个tutorial，告诉你如何做到这一点，没有自己测试过，但似乎它应该工作。

反正我会推荐你用JS来做这件事，你会对它有更多的控制，并且让它成为跨浏览器。

来源

2013-06-01 20:17:08 mfreitas

您给我的非CSS解决方案有效。这里是小提琴：http://jsfiddle.net/paulocoelho/2qyrp/12/它的乐趣，因为我也来自丰沙尔。哈！：P Obrigado :) – PCoelho

我很高兴我能够帮助你。这是一个小世界eheh :) – mfreitas

**只是对我以前的评论的更正。我修改非JS，而不是非CSS。 – PCoelho

结构布局为列，其垂直拉伸并依次用可变高度元素填充每列。

来源

2013-06-01 20:16:33 psyclr

内嵌块元素问题

回答

相关问题