多个固定大小div的自动换行符

Question

我的目标是让DIV包含其他固定大小的DIV。如有必要，这些DIV应包含换行符（仅限）。所以它应该如下所示：

不需要换行：

_______________________________
|   ____   ____   ____        |
|   |__|   |__|   |__|        |
|                             |
|                             |
|_____________________________|

必要的换行：

_______________________________
|   ____   ____   ____   ____ |
|   |__|   |__|   |__|   |__| |
|   ____                      |
|   |__|   ...                |
|_____________________________|

目前，我能提出的最好成绩如下：

<div id="outer">
    <div>
        <p>Some text</p>
    </div>
    ...
</div>

<style>
#outer {
    overflow: auto;
}
#outer div {
    display: inline;
    border: 1px solid black;
}
#outer div p {
    width: 60px;
    height: 60px;
    Display: inline-block;
}
</style>

有人知道如何实现这个目标吗？

Answer 1

希望这会帮助您解决您的疑问，让我知道任何问题 @thomas

＆＃13;

＆＃13;

#outer {
    overflow: auto;
  border:1px solid #ff0000;
  padding:10px;
}
#outer div {
    display: inline-block;
    border: 1px solid black;
    margin:0px 1% 2% 1%;
}
#outer div p {
    width: 60px;
    height: 60px;
    margin:0px;
    display: inline-block;
}

＆＃13;

<div id="outer">
    <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
  <div>
        <p>Some text</p>
    </div>
    ...
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试以下操作： Demo

#outer div {
    display: inline-block; / Use inline-block */
    border: 1px solid black;
}
#outer div p {
    width: 60px;
    height: 60px;
}

Answer 3

这里你的代码工作正常我试图将显示内联块更改为div以使块连续

＆＃13;

＆＃13;

#outer {
    overflow: auto;
}
#outer div {
    display: inline-block;
    padding: 5px;
    border: 1px solid #808080;
    text-align: center;
    line-height: 32px;
    margin: 15px;
}
#outer div p {
    width: 60px;
    height: 60px;
}

＆＃13;

<div id="outer">
    <div>
        <p>Some text</p>
    </div>
     <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
    <div>
        <p>Some text</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

以下是此

的演示工作代码

<强> Demo code