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

我的问题是我的观点只允许两个宽，所以第三个被推得太远了。

观察到的输出：

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

必需的输出：

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

是否有任何简单的解决方案不涉及2列div布局？由于这些是动态加载的，每个选项卡类别中有3-5个，我需要将它们加载到一个div中。由于角度，它们在一个阵列中。两个div列意味着2个数组。我正在寻找一个简单的CSS解决方案。我试过＆lt; vertical-align：top;＆＃39;没有成功。

@farid：我不能使用固定高度...这是按比例缩放到所有设备尺寸。自动换行可以使高度变得不可预测，我不想要图形故障。所说的问题比掉掉它们所处的GUI元素的话要好得多。除非你的意思是让它们都更高......我不想浪费屏幕空间：在大屏幕上会有太多的填充。

Answer 1

＆＃13;

* {
  /* 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 */
}

＆＃13;

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

＆＃13;

Answer 2

将float left属性赋予.windows类

内联块和浮动的布局：左元素

2 个答案: