CSS:消除堆叠的响应div之间的差距?

时间:2015-06-13 16:54:34

标签: html space between

通过这个学习我的方式......

我正在努力设置div的行 - 我不希望它们之间有任何空间,并且不确定在宽度变化时需要调整哪些属性。

当图像缩放时,我得到1px间隙出现/消失,或者让其中一个div下降到下一行。

奇怪的是两行基本相同,所以我迷失在这里。

这是当前页面:

http://www.turnerdesign.com/brackets/

感谢 安德鲁

4 个答案:

答案 0 :(得分:2)

缩小差距:

删除height: auto;并设置高度。

 @media screen and (max-width: 959px)
      #column700 {
           width: 73%;
           height: 50px;
           float: left;
      }
      /* Do the same for the other column */
 }

对于差距:

(我先写了这个,然后重新阅读了这个问题,就像,OMG我为另一个问题做了一个完整的答案,因为我一开始并不理解它,但只是因为有人需要填补空白,

<强> HTML:

<div class="column700">
    <div id="firstProject">
    </div>
</div>

<强> CSS:

#firstProject {
    width: 100%;
    padding: 10px;
    background: blue;
}

答案 1 :(得分:0)

您的网页上有多个具有相同ID的元素。如果要为多个元素添加相同的样式,请使用class。

使用峡谷将style="clear: left;"添加到包含图像的div中。

答案 2 :(得分:0)

请使用此代码

<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#image {
    display: block

}
#container{
    width: 960px;
    margin: 0px auto;
}
#header{
    width:100%;
    height:auto;
    margin-bottom: 0px;
    float: left;
    line-height: 0;
}
#name{
    height:50px;
    background:none;
    width:300px;
    float: left;
    line-height: 0;
    vertical-align: top;
}
#contact{
    height:30px;
    background:none;
    width:auto;
    float: right;
    line-height: 0;
}
.image-container{
    vertical-align: top;
    width: auto;
    height:auto;
    background:#296db1;
    background-size: cover;
    line-height:0;
}
.div-left{
    float: left;
}
@media screen and (max-width:959px){
    .image-container{
        float:left;
    }
    #container{
        width: 100%
    }
    #column700{
        width: 73%;
    }    
    #column260{
        width: 27%;
    }    
    img {
        width: 100%;
        height:auto;
    }
}
@media screen and (max-width:640px){
    .image-container{
        float:left;
    }
    #container{
        width: 100%
    }
    #column700{
        width: 73%;
    }    
    #column260{
        width: 27%;
    }    
    img {
        width: 100%;
        height:auto;
    }
}
@media screen and (max-width:320px){
    .image-container{
        float:left;
    }
    #container{
        width: 100%
    }
    .image-container{
        width: 320px;
    }   
    img {
        width: 100%;
        height:auto;
    }
}
.row2{
clear:both;
}

</style>
</head>
<body>
<div id="container">

    <div id="name">
        <p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Title | Description</p>
    </div>

    <div id="contact">
        <p style="font-family:Arial; color:#d1d1d1; font-size:1.5em">Menu</p>
    </div>

    <div id="header">
        <a href="http://www.w3schools.com"><img src="http://www.turnerdesign.com/brackets/images/banner.jpg" block;="" style="display:"></a>
    </div>
    <div class="row-container">
        <!--row 1-->
        <div class="row row1">
            <div class="image-container div-left" id="column700">
                <a href="http://www.w3schools.com"> <img src="http://www.turnerdesign.com/brackets/images/blake.jpg"> </a>
            </div>
            <div class="image-container" id="column260">
                <a href="http://www.w3schools.com"><img src="http://www.turnerdesign.com/brackets/images/canyonmap.jpg"></a>
            </div>
        </div>
        <!--row 2-->       
        <div class="row row2">
            <div class="image-container div-left" id="column260" style="">
                <a href="http://www.w3schools.com"> <img src="http://www.turnerdesign.com/brackets/images/canyon.jpg"> </a>
            </div>
            <div class="image-container" id="column700">
                <a href="http://www.w3schools.com"><img src="http://www.turnerdesign.com/brackets/images/warrior.jpg"></a>
            </div>
        </div>
    </div>    
</div>
</body>
</html>

您还可以看到 - jsfiddle.net演示链接。

您可以随时考虑进一步优化代码:

  1. 优化/最小化每个媒体查询中的css行数。
  2. 为所有媒体查询更智能地管理img参数。
  3. 重组HTML,使其变得更易于管理。

答案 3 :(得分:0)

您的问题实际上并非来自应用于div的宽度,而是因为图像的高度。

这里发生的事情是,在第二行中,您有一个700x100图像,然后是260x100图像。它们的比例不相同,所以你可以理解,指挥它们的宽度会对它们各自的高度产生不同的影响。

最后,在某个窗口宽度处,您最终会在图像与图像之间产生1px的差异。高度(通常是第一个更高)。这导致第3行实际上被推到右边,因为它首先填充1px高度。但是,较小的图像只有足够的空间,因此浏览器为较大的图像打破了新的一行。

<强>解决方案:

  • 在新行的开头为每张图片添加clear: left;。它将解决这个问题,但1px的高度差仍然存在,并且在较小的图像和下一行之间会出现一条白线。

PS:如果我找到更好的解决方案,我会编辑这篇文章。