Question

基本上，我希望外部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|                      | |
| |  `-`                      | |
| `---------------------------` |
|                               |
`-------------------------------`

什么是最好的（就像开发者时间最简单的方式）实现这一目标的方法？

Answer 1

设置此块 - display: inline-block，并为主容器设置一些宽度......

  .div {
     display: inline-block;
  }

http://jsfiddle.net/guh5Z/1/

Answer 2

您可以将float: left应用于每个内部div。请参阅以下jsFiddle作为示例（尝试调整结果窗格以查看行为）：

jsFiddle（Live）：http://jsfiddle.net/guh5Z/

源代码：

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

Answer 3

如果您要放置文字，则可以使用<ul>。像这样：

CSS：

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

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

HTML：

<ul>
  <li>Random text here</li>
  <li>Random text here</li>
</ul>

我希望有帮助

我该如何包装div？

3 个答案: