第一张图片上显示了六个相等的 div。当屏幕尺寸增加时，div 宽度变得更大，以便 div 填充它们的所有位置(表格单元格或另一个 div)。但是，如果有足够的空间将第四个 div 放在第一行中，它就会变成这样(第二张图片)。在此之后，div 的宽度变为初始值(如第一张图片所示)。 第二行的两个div需要居中。
只用html+css能解决问题吗？或者仅在 javaScript 的帮助下。这个怎么做？感谢您的帮助。
第一张图:
* * * * * * * * * * * *
* * * * * *
* * * * * *
* * * * * * * * * * * *
* * * * * * * * * * * *
* * * * * *
* * * * * *
* * * * * * * * * * * *
第二张图:
* * * * * * * * * * * * * * * *
* * * * * * * *
* * * * * * * *
* * * * * * * * * * * * * * * *
* * * * * * * *
* * * *
* * * *
* * * * * * * *
index.html
<link rel="stylesheet" type="text/css" href="style.css">
<div class="clearfix">
<div class="outer-div">
<div class="inner-div">
<div class="floating-div">Float 1</div>
<div class="floating-div">Float 2</div>
<div class="floating-div">Float 3</div>
<div class="floating-div">Float 4</div>
<div class="floating-div">Float 5</div>
<div class="floating-div">Float 6</div>
</div>
</div>
</div>
样式.css
.clearfix { width: 30%; height: 100px; border: 1px solid}
.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; margin: 10px; border: 1px solid red; }
增加和减少浏览器缩放以查看效果。现在没有必要的结果。 http://jsfiddle.net/TYK3J/4/
最佳答案
我认为可能有几种方法可以实现这一点，但一种可能的方法是根据设备尺寸对元素容器进行媒体查询。然后当媒体查询触发时，您可以使用类似 text-align: center; 的样式来设置容器的样式以对齐所有 div 的中心；对于这种情况。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
</body>
</html>
CSS
.container{
width: 615px;
}
.square{
display: inline-block;
background: pink;
width: 200px;
height: 200px;
}
@media only screen and (min-width : 716px) {
.container{
width: 995px;
text-align: center;
}
}
关于javascript - 如何更改 float div 的宽度以填充它们占据的所有空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24886450/