Question

我有两个彼此相邻的div。一个在左边，像一个菜单。另一个在我的所有内容的右侧。

但是，我的菜单只有300px长。在300px之后，所有帖子都开始落在我的菜单下，不再与我内容div中的其他内容对齐。

这是我菜单的CSS。

#menu {
   border-right: 1px solid #E0E0E0;
   border-top: 1px solid #E0E0E0;
   display: block;
   float: left;
   font-size: 12px;
   height: 300px;
   line-height: 22px;
   margin: 0;
   padding: 0 20px 20px;
   width: 155px;
}

如何在页面增长时使上面的菜单长度增长。

我的主要内容div是一个div，它也封装了我的菜单div。然后每个条目都属于自己的具有以下样式的div

.grid {
  border-right: 1px solid #E0E0E0;
  border-top: 1px solid #E0E0E0;
  display: block;
  float: left;
  height: 480px;
  overflow: hidden;
  padding: 20px;
  position: relative;
  width: 155px;
  word-wrap: break-word;
}

一旦网格通过300px。它低于我的菜单。我该如何防止这种情况？

请记住，尽管我喜欢改变这些div的顺序，但我不能。我使用wordpress.com来托管这个网站，他们只允许我修改我的CSS。所以，只要我能通过CSS完成，我们就是好的。否则，我必须找到另一种方式。

Answer 1

您是否尝试按此 Demo

进行操作

使用display:table-cell;代替display:table-block;

同时从float:left;和#menu

中删除.grid

注意：display: table-cell;适用于除IE 8以外的所有浏览器

Answer 2

我希望你这样看： - http://tinkerbin.com/OUJfyPhs

您可以在两个div中使用display:table-cell;来获得所需的结果。查看更新后的 CSS

#menu {
border-right: 1px solid #E0E0E0;
border-top: 1px solid #E0E0E0;
display: table-cell;
font-size: 12px;
margin: 0;
padding: 0 20px 20px;
width: 155px;
background:yellow;
}

.grid {
border-right: 1px solid #E0E0E0;
border-top: 1px solid #E0E0E0;
background:red;
padding: 20px;
display: table-cell;
width: 155px;
height:560px;
}

Answer 3

不确定这是否有效

#main{
height:100%;
height:auto;}

Answer 4

或者您可以将它们包装在容器中，如下所示：http://tinkerbin.com/KA8dwfji

CSS可以动态并识别另一个div的大小吗？

4 个答案: