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

Question

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

无需换行：

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

需要换行：

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

目前，我能想到的最好的是：

<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

希望这对您有所帮助并解决您的疑问，如有任何问题请告诉我 @托马斯

#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;
}

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

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 以使块连续

#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;
}

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

这里是这个

的演示工作代码

Demo code

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

Multiple fixed size div's auto line break

html

css

line-breaks