3

お役に立てば幸いです。パラメータは次のとおりです。

  • 動的な幅と高さを持つ1つの親コンテナ
  • 可変数の子
  • 親の高さは、ウィンドウサイズに応じてJSで設定されます
  • 親の高さが崩壊するにつれて、その幅は子供に応じて拡大する必要があります
  • 子供は最初に容器を垂直に、次に水平に充填する必要があります
  • 子は親の直接の子孫である必要があります。行と列にネストボックスや追加の構造を使用することはできません。
  • 子供は均一なサイズです
  • 子供は比較的配置されている必要があり、JSでその位置を計算することはできません
  • JSは親の高さ/幅のみを設定できます

HTML

<ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
</ol>

ボックスモデル

[-------------]
[-[1]-[4]-[7]-]
[-[2]-[5]-[8]-]
[-[3]-[6]-[9]-]
[-------------]

高さの収縮後のボックスモデル

[---------------------]
[-[1]-[3]-[5]-[7]-[9]-]
[-[2]-[4]-[6]-[8]-----]
[---------------------]

これはCSS/CSS3ボックスモデルで可能ですか？

ありがとう！！

4

3 に答える 3

2

multi-column一貫性のない実装であることがよく知られていますが、これを実装する最も簡単で標準的な方法のように聞こえます。

http://jsfiddle.net/383uF/1/

コンテナのサイズを制御できるため、実装間の奇妙な不一致を大幅に軽減できることに注意してください。これにより、最も近いxピクセルなどに丸めて、ジャンプや再レンダリングを減らすことができます。

于 2011-10-15T20:03:16.160 に答える
0

使用すると言いますdisplay: inline-blockが、親に設定された幅がある場合にのみ、新しい行に折りたたまれます。パラメータは、JSが親の幅を設定できることを示しているため、線を正しく折りたたむためにボックスの幅を計算する場合は、この方法を使用できます。

基本的に、各子は設定された幅/高さでインラインブロックに設定されます。次に、それぞれにマージン右を追加して互いに間隔を空け、次にマージン左を親に追加して左に配置します。また、適切な間隔があります。次に、親の高さに基づいて、子を正しく折りたたむために親が必要とする幅を計算するために、親が持つことができる子の行数を計算します（マージン左を含めないように注意してください）幅の親の）。それはすべて基本的なCSSであり、CSS3は必要ありません。

于 2011-10-15T19:37:50.340 に答える
0

CSS3列を使用せずに、垂直方向、次に水平方向に塗りつぶすことはできないと思います。ただし、列から縮小してフィットする動作を取得する方法がわかりません。

これは、WebKitで必要なすべてのことを実行します（Geckoの下部にこぼれます）。ただし、縮小してフィットし、の途中で破損する可能性がありliます。

<!DOCTYPE html>
<html><head>
  <title>untitled</title>
  <style type="text/css" media="screen">
    html, body { height: 100%; }
    ol {
      margin: 0;
      padding: 0;
      border: 1px solid blue;
      height: 50%;
      -webkit-column-width: 10em;
      -webkit-column-fill: auto;
    }
     li {
       -webkit-break-inside: avoid;
       position: relative;
       margin: 0;
       padding: 0;
       width: 10em;
       height: 7em;
       display: block;
       border: 1px solid red;
     }
  </style>
</head><body>
  <ol>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
  </ol>
</body></html>
于 2011-10-15T20:12:52.943 に答える