爲什麼將display：none設置爲inline-block div內的元素使inline-block不能渲染爲嵌入塊;

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <style> 
 
     .container{ 
 
      height: 400px; 
 
      min-width: 200px; 
 
      display: inline-block; 
 
      border: 1px solid grey; 
 
     } 
 
     .item{ 
 
      border: 1px solid grey; 
 
      margin: 5px; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="container"><div class="item" style="display: none;">123</div></div> 
 
    <div class="container"><div class="item">123</div></div> 
 
    <div class="container"><div class="item">123</div></div> 
 
</body> 
 
</html>

的問題是當我添加樣式= 「顯示：無;」到第一個項目，容器不內聯顯示。當我刪除顯示：無，沒關係。任何人都可以告訴我爲什麼？

來源

2015-02-10 qzh

您可以將display:none更改爲visibility:hidden，它可以工作。

這5類作爲一個解決方案：HERE - 默認對齊方式爲基準，並沒有在div任何內容，也沒有基線。如果您添加vertical-align：top，則可以解決此問題。這就是爲什麼我的'解決方案'上面的工作原理 - visibility：hidden將元素內聯 - 而display：none將它從流中取出。

來源

2015-02-10 03:54:32 sideroxylon

我想知道爲什麼還，這是無法超越的科學方法的既定原則，給大家貢獻的解決方案，讓我們/人瞭解什麼是被看到的不打破它打破。 – sideroxylon 2015-02-10 04:42:55

這可以類作爲溶液：[這裏]（http://stackoverflow.com/questions/1885873/vertical-alignment-of-empty-inline-block-elements） - 默認的對齊是基線，並且不以任何內容該div，沒有基線。如果你添加'vertical-align：top'，你克服了這個問題。這就是爲什麼我上面的'解決方案'工作原理 - 'visibility：hidden'離開元素內聯 - 而'display：none'將它從流中移出。 – sideroxylon 2015-02-10 04:57:05

可能要編輯成你的答案正確;） – BoltClock 2015-02-10 05:00:36

其實，我不知道確切的答案，但我可以爲您提供一個解決方案：

<!DOCTYPE html> 
 
<html> 
 
<head lang="en"> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <style> 
 
     .container{ 
 
      height: 400px; 
 
      min-width: 100px; 
 
      display: inline-block; 
 
      border: 1px solid grey; 
 
     } 
 
     .item{ 
 
      border: 1px solid grey; 
 
      margin: 5px; 
 
      position: absolute; 
 
     } 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="container"><div class="item" style="display: none;">123</div></div> 
 
    <div class="container"><div class="item">123</div></div> 
 
    <div class="container"><div class="item">123</div></div> 
 
</body> 
 
</html>

來源

2015-02-10 03:41:10

THKS非常多。你知道爲什麼發生這種情況嗎？ – qzh 2015-02-10 03:47:03

嘗試

.item{ 
    border: 1px solid grey; 
    margin: 5px; 
}

到：

.item{ 
    border: 1px solid grey; 
    margin: 5px; 
    float:left 
    }

http://jsfiddle.net/djrr93wq/

來源

2015-02-10 03:43:10

爲什麼將display：none設置爲inline-block div內的元素使inline-block不能渲染爲嵌入塊;

回答

相關問題