6

CSS テーブル手法を使用して単純な流動レイアウトを実行しようとしていますが、大きな欠陥が 1 つあります。テーブル セル表示の要素では最小幅と最大幅が無視されます。

次の例で #sidebar 要素をどこまで伸ばすことができるかを指定できる回避策を知っていますか?

XHTML:

<div id="wrapper">

  <div id="main">
  </div>

  <div id="sidebar">
  </div>

</div>

CSS:

#wrapper {
display: table-row;
border-collapse: collapse;
}

  #main {
  display: table-cell;
  }

  #sidebar {
  display: table-cell;
  width: 30%;
  min-width: 100px;  /* does not work! */
  max-width: 310px;  /* does not work! */
  }
4

3 に答える 3

7

各 div 内に別のラッパーを追加します。

<div id="wrapper">

  <div id="main">
    <div class="inner"></div>
  </div>

  <div id="sidebar">
    <div class="inner"></div>
  </div>

</div>

そして、*-widthそれらに宣言を置きます：

#sidebar div.inner {
    min-width: 100px;
    max-width: 300px;
}
于 2009-10-06T04:39:17.270 に答える
1

左 -> 右から下に表示されるサイトのレスポンシブ デザインを検討しており、最小幅を自分で達成したいと考えています。少し調査を行うと、これがこの質問に答えるかもしれないと思います。

https://css-tricks.com/almanac/properties/m/max-width/

于 2015-03-31T03:24:54.913 に答える
-1

サイドバーとメインのセットアップだけを行おうとしている場合は、table-row と table-cell の代わりに float: left を使用します。次に、IDに最小幅を付けることができます。

于 2009-10-06T04:35:07.700 に答える