Question

我有5个左浮动div，我希望div在屏幕宽度上均匀分布。边距设置为20px，并且它几乎完美地工作 - 除了在div的右边比左边更多的空间。这很难描述，所以我拍了一张照片。

http://gyazo.com/5056281587f88224cc4c70d39b472735

正如你所看到的，我制作了＆＃39; divs＆＃39;向左偏移只是一点点 - 我需要它们居中，但如果有空间，仍然会适应每行三个。如果您对我提出的问题有任何疑问，请查看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像素。我可以在320px中放入2张图像，25px边距。但是当屏幕旋转到横向时，每行可以适合5。我面临的问题是对象被正确移位 - 它与每行一样多，但图像没有正确分布。我需要的是一种方法，让设备在屏幕上显示宽度，每行放置尽可能多的对象，包括边距。然后，设备需要在屏幕上平均分配对象。

Answer 1

也许你可以阅读这篇文章，希望这可以帮助

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

从我能理解的使用display：inline-block而不是float：left它会给你带来理想的效果

获取更多帮助，至少可以正确解释您的问题，以便我们理解

Answer 3

这可能会也可能不会对您有所帮助。仅使用css无法分发浮动的div。浮动就像那样时髦。有两种css方法取决于这些div中的内容以及您需要的内容 - 在fiddle weird posting error - don't mind this中找到它们。哦是的，flexbox的想法很好。检查caniuse以获取浏览器支持。

如何平均分配浮动的div？

3 个答案: