11

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

什么是最好的（就开发人员时间而言最简单的）方法来实现这一点？

4

3 回答 3

17

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

  .div {
     display: inline-block;
  }

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

于 2012-07-17T07:02:27.227 回答
4

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

jsFiddle（现场）：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>
于 2012-07-17T06:57:56.727 回答
2

如果您要输入文本，则可以<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>

我希望这会有所帮助

于 2012-07-17T07:05:36.620 回答