0

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

但是，我的菜单只有 300 像素长。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 做到这一点，我们就很好。否则，我必须另寻他法。

4

4 回答 4

1

你想像在这个演示中那样做吗

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

也float:left;从两者#menu中删除.grid

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

于 2012-07-11T05:41:17.177 回答
0

不确定这是否有效

#main{
height:100%;
height:auto;}
于 2012-07-11T05:45:22.600 回答
0

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

于 2012-07-11T09:06:50.323 回答
0

我希望你能看到这个：- http://tinkerbin.com/OUJfyPhs

display:table-cell;您可以通过在两个 div中使用来实现您想要的结果。

查看更新后的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;
}
于 2012-07-11T05:37:43.957 回答