使用百分比值填充彈性盒項目

我使用Google Chrome中的彈出框（僅支持此瀏覽器）來創建動態佈局。我在一個div元素中有n個子元素，它們應該以相同的比例共享整個空間。由於新推出的柔性盒，這是沒有問題的。但我也必須將每個內部div的高度設置爲0.如果我想將此div內的元素拉伸至100％高度，它將使用給定值0而不是任何計算值。由於我選擇了彈性盒以防止使用JavaScript，我寧願保持這種方式。有沒有其他方法可以使圖像的高度填充div？使用百分比值填充彈性盒項目

這裏是代碼（僅在谷歌瀏覽器測試）：

HTML

<div class="flexbox"> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
    <div><img src="chrome-logo.png" /></div> 
</div>

CSS

  .flexbox { 
       display:-webkit-box; 
       -webkit-box-orient:vertical; 
       height:300px; 
       width:200px; 
      } 
      .flexbox > div { 
       -webkit-box-flex:1; 
       height:0; 
       border:solid 1px #000000; 
      } 
      .flexbox > div > img { 
       height:100%; 
      }

The code to watch in the browser

來源

2011-12-26 Time-Over

爲什麼你必須將高度設置爲0？如果你不打算明確設定高度，那麼你認爲100％的百分之百是什麼？ – robertc 2011-12-26 16:47:16

我這樣做是爲了將整個可用空間分成相同大小的部分。否則，只分配剩餘的空間（沒有內容）。這就像使用該郵件中描述的彈性功能一樣：[http://lists.w3.org/Archives/Public/www-style/2011Nov/0770.html]（http://lists.w3.org/檔案/公共/ www-style/2011Nov/0770.html） – 2011-12-26 18:57:01

嗯，我知道了幾個小時後，工作研究。下列變更的事：

.flexbox { 
      display:-webkit-box; 
      -webkit-box-orient:vertical; 
      height:300px; 
      width:200px; 
     } 
     .flexbox > div { 
      -webkit-box-flex:1; 
      height:0; 
      border:solid 1px #000000; 
      position:relative; /* CHANGE */ 
     } 
     .flexbox > div > img { 
      height:100%; 
      position:absolute; /* CHANGE */ 
     }

如果你在你intrested可以通過ChromeDevTools這些更改CSS，你會看到正確的結果！

來源

2011-12-27 23:42:14

..不要忘記設置'寬度：100％;'鏈接:) – BananaAcid 2014-11-18 18:39:11

使用百分比值填充彈性盒項目

回答

相關問題