web-dev-qa-db-ja.com

インラインブロック要素が使用可能な幅を自動入力することは可能ですか？

インラインブロックである<div id="content">と<div id="sub-navigation>を含む<div id="main container">があります。 main containerが利用可能なページ幅の残りを埋められるようにしたいと思います。それは可能ですか？

Palge Layout

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

CSS：

* {
  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;
}

HTML：

<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>
htmlcsslayoutpage-layout
12
Boris

inline-blockスタイルを削除し、#sub-navigationdivをフロートする必要があります。 inline-blockは、達成しようとしていることに適していません。表示スタイルを追加しない場合、div要素がデフォルト値になります。これはblockであり、block要素はデフォルトで使用可能なすべてのスペースを占有します。 #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要素を追加してください

8
Benjamin Udink ten Cate

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

1
Niet the Dark Absol

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

0
Lazerblade