11

基本的に、外側の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 に答える