html - 元素总是清除向左浮动的短项

Question

请看这个小提琴：http: //jsfiddle.net/FnED8/3/

#nav一旦通过第一行，右侧的项目网格项目总是在左侧元素下方清除，我希望右侧的项目始终保持对齐并且永远不会清除。显然，我可以将高度设置为#nav1000px 之类的大值并获得所需的结果，但这不是答案。

从本质上讲，我想#nav成为 100% 的高度并#projects尊重这一点，永远不要在下面清除，总是留在它旁边。

编辑-#projects是 90% 的宽度以使网格半流动，这不应该影响这个问题。

Answer 1

使您的项目网格像这样：-

#projects-grid {
    float: left;
    width: 300px;

}

http://jsfiddle.net/FnED8/4/

或者你喜欢的任何宽度。马特

Answer 2

一种可能的解决方案是display: inline-block在#projects-grid元素上设置。但是请记住，您需要调整宽度，因为 90% 太宽，无法放在#nav.

更新小提琴

Answer 3

这是你想要达到的目标吗？http://jsfiddle.net/thebabydino/FnED8/7/

为网格设置适当的左边距#projects并删除其 90% 的宽度即可。

#projects-grid {
    margin-left: 174px;
}