如何去除divs間不需要的垂直間距

我在開發網站的前端時遇到了一些問題。我勝任CSS，但不是很棒。無論如何，我已經創建了一個說明我的問題的jsFiddle here。如何去除divs間不需要的垂直間距

在我的網站的每個頁面上，在內容部分的頂部，我有一個橫幅圖像。我希望在內容中放置一個雙色分隔符來分隔這條橫幅。（如在實體模型顯示我的設計師給我：https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg）

我想這樣做的純CSS + HTML，而不只是無論如何，我已經這樣做使用下面的代碼夾緊的圖像：

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;"> 
<div> 
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div> 
</div>

（請原諒內嵌CSS，它只是用於演示目的。而且，不幸的是，如果我把第二個div上一個換行符和縮進它，它創建空白）

我的問題因爲分隔線和圖像之間存在很大差距。我曾嘗試將margin：0px和padding：0px添加到所有相關元素，並且空白仍然存在。

有人可以幫我嗎？

感謝， YM

來源

2013-07-21 Joshua Walsh

使用clearfix方法，你可以搜索這個。 –

對我來說這是一個垂直對齊問題。你可以嘗試

.banner { 
    display: block; 
    width: 100%; 
} 
div { 
    height: 10px; 
    vertical-align: top; 
}

這樣你不必使用負邊界（這是沒有錯的，只是有爭議的做法）。

檢查出來here

來源

2013-07-21 06:02:27 Chad

謝謝，我試過vertical-align：top;之前，但我沒有設置橫幅顯示爲塊。無論如何，我並不是真的想要涉及花車，因爲我沒有覺得他們是必要的，我避免了負利潤率，因爲我擔心它會如何看待不同的屏幕分辨率。 –

可以使相對位置，然後設置上的東西負。例如：

position: relative; 
top:-10px; 
left:0px;

來源

2013-07-21 04:06:50 Daniel

這實際上是浮動的問題

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg"> 
<div style=""> 
    <div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div> 
</div>

CSS

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

http://jsfiddle.net/eLbUU/4/

來源

2013-07-21 04:07:15 Hushme

首先，把暗棕色的淺棕色格。這樣，當窗戶重新調整大小時，不會影響尺寸的百分比和/或間距。

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>

隨着空間，你可以使用負邊距或像其他人提到的花車。

.banner { 
    width:100%; 
    /* margin-bottom to the banner is negative which moves the div upward */ 
    margin-bottom: -10px; 
}

fiddle here

來源

2013-07-21 04:11:19 kmkmkm

把顯示：塊;對於圖像類和float：left;所有其他元素可能會有所幫助。

.banner { 
    width:100%; 
    display:block; 
    float:left; 
}

http://jsfiddle.net/bjliu/eLbUU/7/（編輯：對不起錯誤的鏈接），使用顯示塊和浮動的div，也確保了IMG本身具有溢出隱藏我能條紋收緊到IMG顯示塊

來源

2013-07-21 04:20:33 bjliu

：fiddle

.banner { 
    width:100%; 
    display: block; 
    overflow: hidden; 
} 
div div{ 
    float: left; 
}

來源

2013-07-21 05:23:35

如何去除divs間不需要的垂直間距

回答

相關問題