爲什麼會出現在某些屏幕尺寸的DIV之間的空白

我有以下代碼：爲什麼會出現在某些屏幕尺寸的DIV之間的空白

<div class="mobileTabsNavSub brClear"> 
    <div class="mbBtnLeftMW mbBtnLeftStyle floatLeft"> 
    </div> 
    <div class="mbBtnRightMW mbBtnRightStyle floatRight"> 
    </div> 
    <div class="mBtnMidMW mBtnMidStyle"> 
     <div> 
      <img id="mbMW1" src="icon.png" class="mBtnIcon" /> 
     </div> 
     <div> 
      <a href="localhost:9090" title="services"><span id="mbMW" class="mbBtnText">Services</span></a> 
     </div> 
    </div> 
</div>

CSS：

.mobileTabsNav 
{ 
    display: none; 
    width: 100%; 
    overflow: hidden; 
    margin: 10px 0 10px 0; 
} 
.mobileTabsNavSub 
{ 
    width: 100%; 
    padding: 0 0 10px 0; 
} 
.mbBtnLeftMW 
{ 
    background: url('../theImages/mbMWLeft.png') no-repeat; 
} 
.mbBtnRightMW 
{ 
    background: url('../theImages/mbMWRight.png') no-repeat; 
} 
.mBtnMidMW 
{ 
    background: url('../theImages/mbMWMiddle.png'); 
} 
.mbBtnLeftStyle 
{ 
    min-height: 50px; 
    max-height: 50px; 
    width: 10px; 
    background-size: contain; 
} 
.mbBtnRightStyle 
{ 
    min-height: 50px; 
    max-height: 50px; 
    width: 10px; 
    background-size: contain; 
} 
.mBtnMidStyle 
{ 
    overflow: hidden; 
    min-height: 50px; 
    max-height: 50px; 
    background-size: contain; 
    margin: 0 0px 0 8px; 
    text-align: center; 
    vertical-align: middle; 
    line-height: 40px; 
} 
.floatLeft 
{ 
    float: left; 
} 
.floatRight 
{ 
    float: right; 
}

大多數屏幕尺寸輸出：

enter image description here

出於某種屏幕尺寸：

enter image description here

三幅影像：

enter image description here

請幫助得到一些這些設備的擺脫白色空間。

來源

2014-11-06 Si8

你能不能設置一個[ jsfiddle]（http://jsfiddle.net），我很樂意幫助你。 – Jacta 2014-11-06 16:01:56

我有jsfiddle，但沒有顯示出於某種原因：http://jsfiddle.net/56zcwacs/（我從我的問題中拿走了圖像鏈接） – Si8 2014-11-06 16:10:43

你可以嘗試添加註釋「鏈接」的div並刪除任何空白（不知道它在你的情況，因爲浮動位置）

<div class="mobileTabsNavSub brClear"> 
    <div class="mbBtnLeftMW mbBtnLeftStyle floatLeft"></div><!-- 
--><div class="mbBtnRightMW mbBtnRightStyle floatRight"></div><!-- 
--><div class="mBtnMidMW mBtnMidStyle"> 
    <div> 
     <img id="mbMW1" src="icon.png" class="mBtnIcon" /> 
    </div> 
    <div> 
     <a href="localhost:9090" title="services"><span id="mbMW" class="mbBtnText">Services</span></a> 
    </div> 
</div>

來源

2014-11-06 16:05:06 peppeocchi

你究竟是什麼意思？ – Si8 2014-11-06 16:22:36

請參閱divs之間的灰色''？它的意思是刪除它們之間的空格，這就是他的意思 – Banana 2014-11-06 16:27:04

@ SiKni8插入html註釋標記刪除空格（在你的情況下，分隔div的「新行」 - 被解釋爲一個空格 - 見代碼在我的回答中，在每個

之後開始評論，並在下一個

之前關閉評論。如果你想讓代碼縮進，如果你願意，你可以刪除div之間的所有「新行」這是相同的 – peppeocchi 2014-11-06 16:27:28

爲什麼會出現在某些屏幕尺寸的DIV之間的空白

回答

相關問題