我正在尝试创建一个完全响应和吸引力的图库。但是当图像像画廊中的普通图像一样对齐时，这非常困难，当您调整窗口/图库的大小时，图像看起来很棒。但是在窗口全屏的情况下，图像开始变得怪异而不是按照它们应该的顺序。 如果有人知道到底出了什么问题或者添加了什么，请告诉我。 谢谢！
div.img {
border: 1px solid #ccc;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
body {
background-color: white;
margin: 0;
padding: 0;
}
.navigation {
padding-top: 70px;
padding-bottom: 70px;
position: relative;
text-transform: uppercase;
overflow: hidden;
}
.brand-text {
font-family: 'Permanent Marker', cursive;
font-size: 50px;
color: black;
-webkit-transition: color 1000ms ease;
text-align: center;
margin-bottom: 20px;
margin-left: 0;
margin-right: 0;
margin-top: 0;
padding: 0;
display: block;
display:inline-block;
position: relative;
text-align: center;
left: 50%;
transform: translate(-50%);
}
.brand-text:hover {
color: grey;
}
.nav-brand {
text-decoration:none;
}
.nav-menu {
text-align: center;
}
.nav-link {
padding-top: 7px;
padding-bottom: 7px;
margin-right: 20px;
margin-left: 20px;
text-decoration: none;
text-align: center;
color: grey;
font-family: 'Raleway', sans-serif;
-webkit-transition: color 700ms ease;
position: relative;
display: inline-block;
}
.nav-link:hover {
color: black;
}
.current {
color: black;
}
.current:hover {
color:
}
.about-section {
width: 75%;
margin: auto;
border: 3px solid #f2f2f2;
position: relative;
}
.me-image {
width: 100%;
}
.about-img {
width: 100%;
height: auto;
position: relative;
float: left;
overflow: hidden;
margin-bottom: 20px;
}
.about-title {
color: black;
font-family: 'Raleway', sans-serif;
font-size: 40px;
margin: 20px;
}
.about-me {
font-family: 'Libre Franklin', sans-serif;
line-height: 150%;
margin: 20px;
font-size: 18px;
}
.footer {
background-color: #f2f2f2;
padding: 20px;
margin-top: 30px;
font-family: 'Libre Franklin', sans-serif;
position: relative;
bottom: 0;
clear: both;
left: 0;
right: 0;
bottom: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Josh Corbett</title>
<meta charset="UTF-8">
<meta name="description" content="Portfolio of Josh Corbett. Full of photography, art, graphics/illustrations, and maybe more!" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" type="text/css" href="images.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">
</head>
<body>
<div class="navigation">
<a class="nav-brand" href="#"><h1 class="brand-text">Josh Corbett</h1></a>
<div class="container">
<nav class="nav-menu" role="navigation">
<a class="nav-link current" href="Home.html">Portfolio</a>
<a class="nav-link" href="About.html">About</a>
<a class="nav-link" href="Blog.html">Blog</a>
</nav>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="Photos/apple.png" alt="Apple Vector" width="600" height="400">
</a>
<div class="desc">Apple Products Vector</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="Photos/Panda.jpg" alt="Cute Panda" width="600" height="400">
</a>
<div class="desc">Cute Panda</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="Photos/2dlandscape.jpg" alt="Flat Landscape" width="600" height="400">
</a>
<div class="desc">Flat Landscape</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="Photos/jclogo.png" alt="JC Logo" width="600" height="400">
</a>
<div class="desc">JC Logo</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="Photos/Leaf.JPG" alt="Leaf" width="600" height="400">
</a>
<div class="desc">Raspberry Leaf</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="Photos/Grass.JPG" alt="Grass" width="600" height="400">
</a>
<div class="desc">Long Grass</div>
</div>
</div>
<div class="responsive">
<div class="img">
<a target="_blank" href="#">
<img src="Photos/Me.jpg" alt="Me" width="600" height="400">
</a>
<div class="desc">Just Me</div>
</div>
</div>
<div class="footer">
©Josh Corbett 2016
</div>
</body>
</html>
答案 0 :(得分：1)
更长的文字说明，当它包装时，你会看到＆＃34;古怪＆＃34;。
添加空白区域：nowrap; to .responsive将解决你的问题。
我建议尝试使用像flexbox这样的技术，因为你将更少地使用浏览器。 http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
答案 1 :(得分：0)
首先，你有一个额外的结束div标签，只有＃34; Apple Products Vector＆＃34;线，这可能会导致问题。
其次，您需要修复宽度和高度层次。首先你设置＆＃34; img＆＃34; width和height属性，但是在CSS中设置＆＃34; div.img img＆＃34;宽度和高度，如果我没有错误，将覆盖这些值（它最好只在CSS中设置图像大小）。接下来＆＃34;响应＆＃34; div的宽度设置，因为对于所有窗口大小，它的百分比不会是600px（img宽度）加上填充，边距和边框。
第三，你需要学习浮点数。 Float旨在允许文本环绕图像或其他块级元素。虽然它可以用来自动移动块级元素（div，img，ect），但你必须要有所不同。首先要记住，浮动必须知道每个块级元素的大小，如果它要正确定位，这就是为什么我在此之前提到你的大小问题。接下来要意识到浮动正试图将每个div包裹在其他div之间（如果你认为你的大脑可能会爆炸那么太难）。但是，div并不像句子和段落一样灵活。为了简化每个div首先分配其顶部位置，然后分配其左侧位置。因此对于第一行，它将填充左侧的第一个可用插槽，但对于第二行，它将从顶部填充，然后从左侧填充。因此，如果其中一个div比其他div短，则float会在填充到左边之前填充它下面的空间。
最后你应该把所有＆＃34;响应＆＃34;如果您要使用float，则在包装div中使用div，因为float会检查父元素样式以帮助它对定位浮动元素做出一些决定。
有一些关于使用float的好教程，特别是使用float的陷阱，你可能想查找它们，因为它可能对你有所帮助。