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

【问题标题】：Multiple fixed size div's auto line break多个固定大小的 div 的自动换行符
【发布时间】：2015-10-12 08:50:01
【问题描述】：

我的目标是拥有一个包含其他固定大小的 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>

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

【问题讨论】：

你试过使用 flexbox 吗？ - css-tricks.com/snippets/css/a-guide-to-flexbox
@ThomasSparber 它工作正常，因为我刚刚添加了一些 CSS 代码 jsfiddle.net/44rbrh4r/1

标签： html css line-breaks

【解决方案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>

【讨论】：

【解决方案2】：

试试这样：Demo

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

【讨论】：

【解决方案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

【讨论】：