通过这个学习我的方式......
我正在努力设置div的行 - 我不希望它们之间有任何空间,并且不确定在宽度变化时需要调整哪些属性。
当图像缩放时,我得到1px间隙出现/消失,或者让其中一个div下降到下一行。
奇怪的是两行基本相同,所以我迷失在这里。
这是当前页面:
http://www.turnerdesign.com/brackets/
感谢 安德鲁
答案 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演示链接。
您可以随时考虑进一步优化代码:
img
参数。HTML
,使其变得更易于管理。 答案 3 :(得分:0)
您的问题实际上并非来自应用于div的宽度,而是因为图像的高度。
这里发生的事情是,在第二行中,您有一个700x100图像,然后是260x100图像。它们的比例不相同,所以你可以理解,指挥它们的宽度会对它们各自的高度产生不同的影响。
最后,在某个窗口宽度处,您最终会在图像与图像之间产生1px的差异。高度(通常是第一个更高)。这导致第3行实际上被推到右边,因为它首先填充1px高度。但是,较小的图像只有足够的空间,因此浏览器为较大的图像打破了新的一行。
<强>解决方案:强>
clear: left;
。它将解决这个问题,但1px的高度差仍然存在,并且在较小的图像和下一行之间会出现一条白线。PS:如果我找到更好的解决方案,我会编辑这篇文章。