简体   繁体   中英

Why is there white space in between the DIVs on certain screen size

I have the following code:

<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;
}

Output on most screen size:

在此处输入图片说明

Out on some screen size:

在此处输入图片说明

Three images:

在此处输入图片说明在此处输入图片说明在此处输入图片说明

Please help to get rid of the white space on some of those devices.

You can try adding comments to "link" the divs and remove any white space (not sure if it works in your case because of the float position)

<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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM