338

テーブルやJavaScriptを使用せずに次の構造を実現するにはどうすればよいですか？白い境界線はdivのエッジを表しており、質問とは関係ありません。

構造1

中央の領域のサイズは変化しますが、正確なピクセル値があり、構造全体がそれらの値に従ってスケーリングする必要があります。簡単にするために、「100％-npx」の幅を上中央と下中央のdivに設定する方法が必要です。

クリーンなクロスブラウザソリューションをいただければ幸いですが、それが不可能な場合は、CSSハックで十分です。

ここにボーナスがあります。私が苦労していて、テーブルまたはJavaScriptを使用することになったもう1つの構造。少し異なりますが、新しい問題が発生します。私は主にjQueryベースのウィンドウシステムで使用していますが、レイアウトをスクリプトから除外し、1つの要素（中央の要素）のサイズのみを制御したいと思います。

構造2

4

10 に答える 10

828

私が偶然見つけた新しい方法: csscalc() :

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

ソース: CSS 幅 100% マイナス 100px

于 2013-02-04T11:23:36.970 に答える
80

ネストされた要素とパディングを使用して、ツールバーの左端と右端を取得できます。div要素のデフォルトの幅は ですauto。これは、使用可能な幅を使用することを意味します。その後、要素にパディングを追加しても、使用可能な幅内に収まります。

これは、画像を左右の角を丸くし、それらの間で繰り返される中央の画像を配置するために使用できる例です。

HTML:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

CSS:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}
于 2009-03-16T17:45:25.877 に答える
7

Guffaの答えは多くの状況で機能しますが、場合によっては、左側または右側のパディングを中央のdivの親にしたくない場合があります。このような場合、中央でブロックフォーマットコンテキストを使用して、パディングdivを左右にフロートさせることができます。これがコードです

HTML：

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

CSS：

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

この要素の階層は、ネストされたネストされたdivと比較するとより自然であり、ページの内容をより適切に表現していると思います。このため、境界線、パディング、およびマージンは、すべての要素に通常どおり適用できます（つまり、この「自然さ」はスタイルを超えており、影響があります）。

これは、「デフォルトで幅の100％を埋める」プロパティを共有するdivおよびその他の要素でのみ機能することに注意してください。入力、テーブル、および場合によっては他のものをコンテナdivでラップし、この品質を復元するためにもう少しcssを追加する必要があります。そのような状況に陥るほど運が悪ければ、私に連絡してください。CSSを掘り下げます。

ここのjsfiddle：jsfiddle.net/RgdeQ

楽しみ！

于 2012-08-26T10:08:01.433 に答える
7

Flexboxレイアウトを利用できます。flex: 1それぞれ動的な幅または高さを持つ必要がある要素を設定する必要がありflex-direction: row and columnます。

動的幅:

HTML

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

出力：

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}
<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

動的高さ:

HTML

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

CSS

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

出力：

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

于 2015-12-10T13:29:02.407 に答える
3

これを行う通常の方法は、ネストされた要素である Guffa で概説されているとおりです。これに必要なフックを取得するために余分なマークアップを追加しなければならないのは少し悲しいことですが、実際にはラッパーの div がここかそこかにあっても、誰も害を及ぼすことはありません。

余分な要素なしでそれを行う必要がある場合 (たとえば、ページのマークアップを制御できない場合)、box-sizingを使用できます。これはかなり適切ですが、完全または単純なブラウザー サポートではありません。ただし、スクリプトに頼らなければならないよりも楽しいでしょう。

于 2009-03-17T05:59:30.323 に答える
1

ラッピングdivが100％で、ピクセル量にパディングを使用した場合、パディング＃を動的にする必要がある場合は、jQueryを使用して、イベントの発生時にパディング量を簡単に変更できます。

于 2009-03-16T17:16:37.693 に答える
1

同様の問題があり、画面の上部にバナーが必要で、左側に 1 つの画像があり、右側に画面の端まで繰り返される画像がありました。私はそれを次のように解決しました：

CSS:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

鍵は正しいタグでした。基本的には左から131pxから右から0pxまで繰り返すように指定しています。

于 2011-02-08T04:25:19.770 に答える
0

状況によっては、余白設定を利用して、「幅 100% から N ピクセルを差し引いた値」を効果的に指定できます。この質問に対する受け入れられた回答を参照してください。

于 2009-03-16T17:19:15.987 に答える