Question

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

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

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

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

这是当前页面：

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

感谢安德鲁

Answer 1

缩小差距：

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

Answer 2

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

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

Answer 3

请使用此代码

<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演示链接。

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

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

Answer 4

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

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

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

<强>解决方案：

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

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

CSS：消除堆叠的响应div之间的差距？

4 个答案: