0
我有5个左浮动的div，我希望divs沿屏幕宽度平均分配。页边距设置为20px，并且它几乎完美地工作 - 除了div右边的空间比左边多一点。这很难描述，所以我拍了一张照片。如何平等分发浮动divs？
http://gyazo.com/5056281587f88224cc4c70d39b472735
正如你所看到的，我所做的“申报单”向左侧偏离只是一点点 - 我需要他们为中心，但仍然会适应三个每行，如果有空间。如果您对我的要求有任何疑问，请查看m.harvard.edu并在桌面上进行测试 - 调整窗口大小，您将看到图标保持均匀分布，直到有足够的空间存放其他图标为止创建。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Diadem Sports</title>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link href="css/core.css" rel="stylesheet" type="text/css" />
<link href="css/core-small.css" media="(max-width:600px)" rel="stylesheet" type="text/css" />
<link href="css/core-large.css" media="(min-width:601px)" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>
<div class="header">
<div class="titlebar">
<div class="logo"></div>
</div>
<div class="navbar-container">
<div class="navbar">
<div class="navbutton">72</div>
<div class="navbutton">73</div>
<div class="navbutton">74</div>
<div class="navbutton">75</div>
<div class="navbutton">76</div>
<span class="strech"></span>
</div>
</div>
</div>
</body>
</html>
core.css
@charset "utf-8";
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, li {
margin: 0;
padding: 0;
}
.titlebar {
width: 100%;
height: 60px;
border-bottom: #5CB4C0 2px solid;
}
.logo {
background: url(../img/diadem.png) no-repeat center center;
}
.navbutton {
cursor: pointer;
display: inline-block;
float: left;
width: 15%;
height: 60px;
text-align: center;
line-height: 60px;
border-bottom: #5CB4C0 2px solid;
/*color: #5CB4C0;*/
font-family: "Montserrat", "Arial Black", Gadget, sans-serif;
}
.navbutton:hover {
background-color: #008C99;
border-bottom: #008C99 2px solid;
color: #FFFFFF;
}
核心small.css
@charset "utf-8";
.header {
width: 100%;
height: 100%;
}
.navbar {
width: 80%;
margin: 0 auto;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.navbutton {
float: left;
width: 60px;
height: 60px;
border: #5CB4C0 2px solid;
border-radius: 10px;
margin: 20px;
vertical-align: top;
display: inline-block;
*display: inline;
}
.strech {
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}
编辑：我要解释这个更深入的我猜，所以这里是我的尝试 - 再次，如果你不明白，就问问题，因为我觉得这很难解释。我正在设计一个使用CSS媒体查询的响应式网站。我正在设计从小到大 - 我目前正在研究该网站的移动版本。我有一套约10个网站的缩略图。正如你们许多人所知道的那样，当对象被浮动时，它们填充行，直到不再能够适合行，并且下一行移动到下一行。由于手机屏幕的大小不同，因此不同数量的静态图像可以放在一行上。以iPhone为例，屏幕宽度为纵向320像素。我可以在320像素中使用25像素的边距拍摄2张图像。但是当屏幕旋转到横向时，每行可放5个。我面临的问题是对象正确移位 - 它尽可能多地适合每行，但图像分布不正确。我需要的是设备在屏幕宽度上进行计算的方法，放置尽可能多的对象，如每行可以包含边距。然后设备需要平均分配屏幕上的对象。
我可以看到示例代码（HTML和CSS）以更好地理解您的问题。 – 2014-09-24 05:18:39
请包括您正在使用的代码...不建议发布链接，因为这些链接可能在将来变得不可用（本网站不仅仅是为了回答您的问题，还是为了帮助其他人以后可能访问该网站） – webeno 2014-09-24 05:18:45
你需要包括你的代码，你有什么尝试。此外，该图片每行有2个拇指，而不是3个 – Devin 2014-09-24 05:19:24