Javascript 如何更改浮动div'；它的宽度能填满它们占据的所有空间吗？_Javascript_Jquery_Html_Css

Javascript 如何更改浮动div'；它的宽度能填满它们占据的所有空间吗？

javascript jquery html css

Javascript 如何更改浮动div'；它的宽度能填满它们占据的所有空间吗？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,第一张图片上有六个相等的div。当屏幕尺寸增大时，divs width变大，以使div填满其所有位置（表格单元格或另一个div）。但如果有足够的空间在第一行中放置第四个div，它就会变成这样（第二张图片）。在此之后，div的宽度变为初始宽度（如第一张图片所示）。第二行的两个div必须居中是否可以仅借助html+css解决此任务？或者仅在javaScript的帮助下。如何做到这一点？谢谢你的帮助第一张图片： * * * * * * * * * * * * * * *

第一张图片上有六个相等的div。当屏幕尺寸增大时，divs width变大，以使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>

增加和减少浏览器缩放以查看效果。现在没有必要的结果。

您必须在要保持在线的3个div周围使用某种包装。类似于中的

.row

CSS示例

.wrapper { width: 100%;}
.wrapper > div {
    width: 32%;
    display: inline-block;
    min-height: 50px;
}

在这里拉小提琴：

这不可能通过浮动实现，因为浮动的目的只是将元素左对齐和右对齐，最初是在内联文本块内

现在最常用的方法是在框上使用

display:inline block

属性，并通过容器中的

text align:center

将它们对齐。这个解决方案需要一些技巧来保持像素的完美。要让方框填满整个空间，您可以使用不同的CSS媒体查询，通过划分可用空间来更改一行中的方框数量（例如，每个方框的宽度为25%，从720px增加到一行中有四个）

我建议您设置并尝试此解决方案–如果您需要更多提示，我们可以在这方面帮助您

附录：前沿解决方案是使用FlexBox；不过，这些在web开发人员中仍然很少见，因为浏览器支持最近才有所改善

附录2：我刚刚看到你也给你的帖子加了标签；我不建议使用这种解决方案，尽管有一些以前流行的lib允许复杂的网格布局

我认为可能有几种方法可以实现这一点，但一种可能的方法是基于设备维度对元素容器进行媒体查询。然后，当媒体查询触发时，您可以使用类似文本align:center；对于这个案子

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>

工作示例：

请提供您迄今为止尝试的演示。您是否设置了

max width

css属性，从而限制了div的扩展范围？另外，是的，JSFIDLE也不错。使用

display:inline block

代替float，行中总是有3个正方形。但在小显示屏上必须有3个正方形排成一行，在大显示屏上第一行有4个正方形，第二行有2个正方形（如post shema by*所示）.我已经更新了工作示例，以适应您的要求，即小屏幕始终有3个，并且比某个大小大，使最上面一行有4个，以儿童为中心，有两个。您需要根据您的具体要求编辑宽度并添加最大宽度，但希望这对您有所帮助-

<!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>

.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;
    }
}