Javascript 我怎样才能包装沙发呢？_Javascript_Html_Css_Layout

Javascript 我怎样才能包装沙发呢？

javascript html css layout

Javascript 我怎样才能包装沙发呢？,javascript,html,css,layout,Javascript,Html,Css,Layout,基本上，我希望外部div之外的内部div根据外部div的宽度进行包裹，而外部div又根据浏览器窗口的宽度进行扩展和收缩，如下所示： .---------------------. | | <-- Browser Window | .-----------------. | | | ,-, ,-, ,-, | | | | |X| |X| |X| | | | | `-` `-` `-` | | | |

基本上，我希望外部div之外的内部div根据外部div的宽度进行包裹，而外部div又根据浏览器窗口的宽度进行扩展和收缩，如下所示：

.---------------------.
|                     | <-- Browser Window
| .-----------------. |
| |  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  | |
| |  `-`  `-`  `-`  | |
| |                 | |
| |  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  | |
| |  `-`  `-`  `-`  | |
| `-----------------` |
|                     |
`---------------------`

.-------------------------------.
|                               | <-- Browser Window enlarged
| .---------------------------. |
| |  ,-,  ,-,  ,-,  ,-,  ,-,  | |
| |  |X|  |X|  |X|  |X|  |X| <----- Inner divs wrap around accordingly, as if
| |  `-`  `-`  `-`  `-`  `-`  | |     they are text
| |                           | |
| |  ,-,                      | |
| |  |X|                      | |
| |  `-`                      | |
| `---------------------------` |
|                               |
`-------------------------------`

————。
||您可以将float:left
应用于每个内部div。以下面的JSFIDLE为例（尝试调整结果窗格的大小以查看行为）：
JSFIDLE（实时）：
源代码：
<html>
<head>
    <style type="text/css">
        #outer {
            width: 90%;
            height: 90%;
            margin: 5%;
            overflow: auto;
            background-color: red;
        }

        .inner {
            float: left;
            width: 150px;
            height: 150px;
            margin: 20px;
            background-color: blue;
        }
    </style>
<body>
    <div id="outer">
        <div class="inner">X</div>
        <div class="inner">X</div>
        <div class="inner">X</div>
        <div class="inner">X</div>
        <div class="inner">X</div>
        <div class="inner">X</div>
    </div>
</body>
</html>


#外{
宽度：90%；
身高：90%；
利润率：5%；
溢出：自动；
背景色：红色；
}
.内部{
浮动：左；
宽度：150px；
高度：150像素；
利润率：20px；
背景颜色：蓝色；
}
X
X
X
X
X
X
为此块设置-显示：内联块
，对于主容器设置一些宽度
  .div {
     display: inline-block;
  }

如果您将文本替换为文本，则可以使用
。大概是这样的：
CSS:
HTML:

这里是随机文本
这里是随机文本


我希望这有助于
现在起作用；不太清楚那里发生了什么。添加了jsFiddle链接。请在回答中包含代码，因为jsFiddle可能有一天会关闭：）这比浮动左解决方案更好。因为浮动元素将弹出外部div，除非您指定overflow:hidden on the outer div good catch，@WouterH<代码>内联块

应展开包含的元素。我认为JSFIDLE更好地描述了这一差异，因为高度不是固定的。我认为这是更“未来”的解决方案，当然，在较低的IE实现中，你会遇到问题，但这是某种妥协；）杰出的谢谢有没有办法证明所有的div都是正确的？没有必要，但如果可能的话会很好。@请看。这与Jonathan Newmuis的答案中建议的技巧相同。哦，我直到现在才看到Jonathan的答案：）不幸的是，它不是文本，而是包含在div中的文本和信息的组合：（不过谢谢你的建议！你不必只插入文本。你也可以把嵌套的div放在那里。

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  width: 100px;
  height: 120px;
  border: 1px solid;
  float: left;
  margin: 5px;
}