html - inline-block 和 float 的布局 : left elements

Question

我一直在寻找特定问题的答案。我有一些重复的元素(使用angularjs，但这与它无关)。包裹到第二行的第三个元素在第二个元素高时被向下推，在第一列的第一个和第三个元素之间留下空白。我想避免这种情况。

结构类似这样:

<div class="windows"> 
    <div>short content</div> 
    <div>tall content<br />more content</div> 
    <div>any size</div> 
</div>

和 css3:

windows { display: block }
windows > div { 
    display: inline-block;
    float: left;
}

我的问题是我的 View 只允许两个宽度，所以第三个被压得太低了。

观察到的输出:

#################################
#*************** ***************#
#*short content* *Tall content *#
#*************** *More content *#
#                ***************#
#***************                #
#*Any Size     *                #
#***************                #
#################################

要求的输出:

#################################
#*************** ***************#
#*short content* *Tall content *#
#*************** *More content *#
#*************** ***************#
#*Any Size     *                #
#***************                #
#################################

有没有不涉及 2 列 div 布局的简单解决方案？由于这些是动态加载的，每个选项卡类别有 3 - 5 个，我需要将它们简单地加载到一个 div 中。由于有 Angular ，它们在一个阵列中。两个 div 列将意味着 2 个数组。我正在寻找一个简单的 CSS 解决方案。我试过“垂直对齐:顶部；”没有成功。

@farid:我不能使用固定高度...这是针对所有设备尺寸制作的。自动换行会使高度不可预测，我不希望出现图形故障。所陈述的问题比单词从它们所在的 GUI 元素中掉落要好得多。除非你的意思是让它们都更高......我不想浪费屏幕空间:在大屏幕上会有太多填充。

Answer 1

* {
  /* include paddding and borders in width */
  box-sizing: border-box;
}

.windows {
    border: solid 5px red;
}

.windows > div {
    border: solid 5px green;
    float: left;
    width: 50%; /* use media queries at some size might set it to 33.333% */
}

.windows > div:nth-child(2) {
    border: solid 5px orange;
    float: right; /* this one needs to be float right */
}

.windows:after {
    content: '';
    display: block;
    clear: both; /* when using floats always clear them */
}

<div class="windows"> 
    <div>short content, <br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div> 
    <div>tall content<br />more content<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
    <div>any size<br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div> 
</div>