0

隣り合わせに設定された2つのdivがあります。左はメニューのようなもの。もう 1 つは右側にあり、すべてのコンテンツが配置されます。

ただし、メニューの長さは 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 を介してそれを行うことができれば、問題ありません。そうでなければ、別の方法を見つけなければなりません。

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/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 に答える
0

または、次のように両方をコンテナーにラップすることもできます: http://tinkerbin.com/KA8dwfji

于 2012-07-11T09:06:50.323 に答える