13

私は、それ自体がインラインブロックであると<div id="content">を含むを持っています。利用可能なページ幅の残りの部分を塗りつぶしたいと思います。それは可能ですか？<div id="sub-navigation><div id="main container">main container

ページレイアウト

要素columns-stripの数と幅に基づいて拡大または縮小する必要があります。columnの幅が のcolumns-strip幅を超える場合main container、水平スクロール バーが表示されます。

* {
      margin: 0px;
      padding: 0px;
      font-size: 10pt;
      white-space: normal; 
    }

    #wrapper {
      margin: 0px 20px; 
      background-color: red;
    }

    #header {
      margin: 25px 10px 10px 10px;
      height: 50px; 
      background-color: purple;
      color: white;
    }

    #content {
      margin: 10px; 
      padding: 10px; 
      font-size: 0pt; 
      white-space: nowrap; 
      overflow: hidden; 
      background-color: white;
    }

    #sub-navigation {
      width: 200px; 
      height: 150px; 
      display: inline-block; 
      vertical-align: top; 
      background-color: forestgreen; 
      color: white;
    }

    #main-container {
      padding: 10px; 
      display: inline-block; 
      overflow: auto; 
      background-color: yellow;
    }

    #columns-strip {
      padding: 10px; 
      font-size: 0pt; 
      white-space: nowrap; 
      background-color: mediumturquoise;
    }

    .posts-column {
      margin: 0px; 
      width: 200px; 
      height: 200px; 
      display: inline-block; 
      vertical-align: top; 
      overflow: auto;
    }

    #footer {
      margin: 10px 10px 25px 10px; 
      height: 50px; 
      background-color: navy;
    }
<div id="wrapper">
  <div id="header"></div>  
  <div id="content">    
    <div id="sub-navigation"></div>    
    <div id="main-container">
      <div id="columns-strip">    
        <div class="posts-column" style="background-color: lightgray;"></div>
        <div class="posts-column" style="background-color: darkgray;"></div>
        <div class="posts-column" style="background-color: gray;"></div>
      </div>
    </div>
  </div>
  <div id="footer"></div>
</div>

4

4 に答える 4

9

スタイルを削除し、 divinline-blockをフロートする必要があります。あなたが達成しようとしているものには適していません。表示スタイルを追加しない場合、要素はデフォルト値になり、要素はデフォルトで使用可能なすべてのスペースを占有します。要素をフローティングすることで、コンテンツに必要なスペースだけを占めるようにします。#sub-navigationinline-blockdivblockblock#sub-navigation

#sub-navigation {
  width: 200px; 
  height: 150px; 
  float : left;
  vertical-align: top; 
  background-color: forestgreen; 
  color: white;
}

#main-container {
  padding: 10px;        
  overflow: auto; 
  background-color: yellow;
}

の後に必ずclear: left要素を追加してください#main-container

于 2012-04-19T00:51:43.257 に答える
1

それはinline-blocks の使用方法ではありません。ここで行う最善の方法は、ナビゲーション ボックスを作成し、デフォルト値float:leftをそのままにしておくことです。display

于 2012-04-19T00:51:27.817 に答える
0

ヘッダー、フッター、ラッパーに特定の幅がある場合は、メイン コンテナーで使用可能なスペースを埋めることができます。ただし、CSS で幅を指定していない場合は、含まれている要素 (ラッパー) のレンダリングされた幅に基づいて、メイン コンテナーの大きさを決定する必要があります。ページの読み込み後にその幅を決定する唯一の方法は、javascript を使用することです。サイトに動的な幅を持たせたいが、コンテンツ (サブナビゲーションとメイン コンテナー) を画面全体に表示したい場合は、javascript またはパーセンテージを使用する必要があります。さまざまな解像度を見始めると、パーセンテージが醜くなる可能性があります。モニター、ラップトップなどの...

于 2012-04-19T00:55:12.523 に答える