javascript - HTML - 我可以在父级 <div> 中包装一系列 <div> 标签吗？

Question

我已经尝试了一段时间，但没有成功。我有 parent <div>标签(假设它的宽度设置为 300px)。我正在尝试添加一系列较小的 <div>标签进入父级，并排放置直到父级的边缘<div>下儿在哪<div>然后将被放置在“下一行”。基本上，我正在努力让这些 child <div>标签就像单词被换行一样。

我已经疯狂地用谷歌搜索了这个，但是如果不计算所有东西的大小并手动放置 child ，我找不到任何方法来真正做到这一点 <div>具有绝对坐标，我可以做到，但我想避免。 Sp 首先，我想知道是否有 css或 javascript可以提供相同行为的方法。

子 div 的数量是可变的，我使用 C# 服务器端代码来计算它们。但我使用的是哪种服务器语言并不重要。

谢谢!

Answer 1

试试这个:

方法一

使用display: inline-block;

HTML:

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

CSS:

html, body { height: 100%; }
#parent {
    background-color: lightblue;
    width: 300px;
    height: 100%;
}
.child {
    width: 50px;
    height: 100px;
    display: inline-block;
    background-color: red;
}

Demonstration.

<hr>
<h2>Approach 2</h2>

使用float: left;

HTML:

<div id="parent">
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
    <div id="child"></div>
</div>

CSS:

html, body { height: 100%; }
#parent {
    background-color: lightblue;
    width: 300px;
    height: 100%;
}
#child {
    width: 50px;
    height: 100px;
    float:left;
    background-color: red;
    margin: 2px;
}

Demonstration.