結算創建兩個div

之間的空隙，我有我的html的以下部分結算創建兩個div

<div class="header">    
    <div class="header-bar"> 
     <div class="pull-left"> 
      <div class="title">Ci models database</div> 
     </div> 
    </div>    
    <div class="clear-both"></div> 
    <ol class=breadcrumb> 
     <li class="active"><a href="#">All models</a></li> 
    </ol> 
</div>

的CSS（麪包屑和活動類是自舉）

.header-bar { 
    border: None; 
    background-color: #66CCFF; 
    min-height:30px; 
} 

.title { 
    padding: 5px 5px 10px 5px; 
    color: white; 
    font-size: large; 
} 
.clear-both{ 
    clear:both; 
}

但之間的報頭 - bar和breadcrumb html添加了一個空格（see bootply）。如何刪除此空白區域，因爲在div之間沒有找到填充和邊距。

來源

2015-06-11 Apostolos

'breadcrumb'類內置了垂直填充...可以這樣嗎？ –

阿波斯托，白色的空間與.title類的到來。
10px的底部填充。
零這個和白色空間會去。

.title { 
    padding: 5px 5px 0px 5px;

來源

2015-06-11 11:21:54 AngularJR

不要明白。 '.title'在'.pull-left'裏面。所以填充底部應該只適用於該div。我無法理解它是如何超越'.tile'div到'的。header-bar' div – Apostolos

它回答你的問題，如何刪除空白？如果是這樣，將其標記爲已回答 – AngularJR

是的，它希望你可以提供一些解釋... – Apostolos

您將不得不向兩個父容器（.header-bar和breadcrumb）添加float: left，否則清除不會影響任何內容。此外，你將不得不放棄這兩個容器width: 100%

.header-bar { 
    border: None; 
    background-color: #66CCFF; 
    min-height:30px; 
    width: 100%; 
    float: left; 
} 

.breadcrumb { 
    width: 100%; 
    float: left; 
} 

.title { 
    padding: 5px 5px 10px 5px; 
    color: white; 
    font-size: large; 
} 
.clear-both{ 
    clear:both; 
}

來源

2015-06-11 11:09:34

的問題是，內部.title div的計算的高度比容器.header-bar的計算出的高度越大。像高度，最小高度，邊框，填充等屬性可以直接影響高度，而像顯示，框的大小和位置等屬性都可以間接影響高度。

結果是內部.title div將流中下一個div壓低10px。

CSS沒有規定div必須包含它的高度的孩子，並阻止他們影響其他div，even when height is directly defined。我們需要確切地告訴它在呈現事物時應該如何表現。

有幾種方法來解決這個問題：

http://www.bootply.com/Qa1ME2M2uk - 父使用overflow: hidden;。 Overflow is a css property它用於如何控制子元素大於父母時發生的情況。值得注意的是，取決於其他屬性溢出不一定會以破壞佈局的方式呈現自身。
http://www.bootply.com/ssq3EAzeyk - 設置顯式高度以嚴格控制元素的尺寸。這可能是標題欄的最佳選擇。
http://www.bootply.com/yeodYRLLJk - 在父母上設置更大的最小高度，其中一定會包含孩子。如果您的填充用於對齊目的，這非常有用 - 在示例中設置min-height: 40px;這樣做。
http://www.bootply.com/GznfJxUWUF - 刪除使元素計算爲更高的填充（如另一個答案中所述）。

來源

2015-06-11 12:04:02

結算創建兩個div

回答

相關問題