javascript - 如何动态地在另一个 div 中显示 div，例如带有某些行和列的表？

Question

我有一个包含任何动态 DIV 的通用 DIV。

例如，我有一个宽度为 100% 的通用 div(容器)，通用 div 中包含 10 个子 div，我需要将 10 个子 div 分隔为通用 div 中的两行。

<div id="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
</div>

注意:前 5 个 div 应在一行中，后 5 个 div 应在另一行中。可以动态地执行此操作吗？感谢您的帮助。

Answer 1

您可以像这样在 css 中更改显示:

.container {
  width: 100%;
  display: block
}

.myClass {
  display: inline-block;
} 

和这样的 html:

<div class="container">
  <div class="myClass">1111111111111111111111111111111111111111111</div>
  <div class="myClass">222222222222222222222222222222222222222222</div>
  <div class="myClass">333333333333333333333333333333333333333</div>
  <div class="myClass">444444444444444444444444444444444444444444444444444</div>
  <div class="myClass">55555555555555555555555555555555555555</div>
  <div class="myClass">66666666666666666666666666666666666666666666666666</div>
  <div class="myClass">7777777777777777777777777777777777777777</div>
  <div class="myClass">88888888888888888888888888888888888888888888888888</div>
  <div class="myClass">99999999999999999999999999999999999</div>
  <div class="myClass">1010101010101010101010101010101010101010101010</div>
</div>