Question

大家好，我的元素有一个小问题。我动态地获取这些元素，我想将它们呈现为4列布局。问题是我无法将它们包装在div和div之间，只是显示内联块并向左浮动，因为它们就像是分开来的。

<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Aquarius</h3>
    <p>20 January&nbsp;- 18 February</p>

</section>
<section data-field="box-image">
    <img
        src=""
        width="160" height="160" alt="">
</section>
<section data-field="box-content">
    <h3>Pisces</h3>
    <p>19 February&nbsp;- 20 March</p>
</section>

所以它显示如下：

但我想要的是向他们展示：

我实际上考虑过使用jquery或javascript包装它们，但是我可以使用css吗？

这就是在DOM上为我生成这个html的方法： {{#each infoContent as | item |}}

 <div class="col-md-12 boxes-container">

                    {{{item.box}}}


                </div>

                {{/each}}

所以这个item.box会生成我要问的代码。

简单我想在div中包装每个box-image和box-content所以我可以在它们上放一些css，或者如果有任何其他方式来呈现它们就像在我的图像中那样阅读它会非常好。

Answer 1

使用div包装图片和文字。

div {
  display: inline-block;
  width: 45%;
  text-align: center;
}

<div>
  <section data-field="box-image">
    <img src="" width="160" height="160" alt="">
  </section>
  <section data-field="box-content">
    <h3>Aquarius</h3>
    <p>20 January&nbsp;- 18 February</p>

  </section>
</div>
<div>
  <section data-field="box-image">
    <img src="" width="160" height="160" alt="">
  </section>
  <section data-field="box-content">
    <h3>Pisces</h3>
    <p>19 February&nbsp;- 20 March</p>
  </section>
</div>

Answer 2

试用此代码

使用public static void max(String number) { if (number.isEmpty()) { System.out.println("The string is empty"); System.exit(0); } int max = Integer.parseInt(number.charAt(0)+""); for (int i = 1; i < number.length(); i++) { int compare = Integer.parseInt(number.charAt(i)+""); if (compare > max) { max = compare; } } System.out.print(max);和position

＆＃13;

flex

＆＃13;

section:nth-child(2) {
    position: absolute;
    top: 160px;
    left: 0;
    width:160px;
}
.section-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
    position: relative;
    width: 350px;
    margin: 0 auto;
    text-align: center;
}
section:nth-child(4) {
    position: absolute;
    top: 160px;
    right: 0;
    width:160px;
}
section:nth-child(1) {
    margin-right: 30px;
}

＆＃13;

使用<div class="section-block"> <section data-field="box-image"> <img src="" width="160" height="160" alt=""> </section> <section data-field="box-content"> <h3>Aquarius</h3> <p>20 January - 18 February</p> </section> <section data-field="box-image"> <img src="" width="160" height="160" alt=""> </section> <section data-field="box-content"> <h3>Pisces</h3> <p>19 February - 20 March</p> </section> </div>

＆＃13;

Flexbox Columns

＆＃13;

section {
    width: 160px;
    height: 160px;
    text-align: center;
}
.section-block {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 320px;
    width: 320px;
    margin: 0 auto;
}
section:nth-child(1) {
    margin-right: 20px;
}

＆＃13;

使用<div class="section-block"> <section data-field="box-image"> <img src="" width="160" height="160" alt=""> </section> <section data-field="box-content"> <h3>Aquarius</h3> <p>20 January - 18 February</p> </section> <section data-field="box-image"> <img src="" width="160" height="160" alt=""> </section> <section data-field="box-content"> <h3>Pisces</h3> <p>19 February - 20 March</p> </section> </div>

＆＃13;

column-count

＆＃13;

section {
    width: 160px;
    height: 160px;
    text-align: center;
    display: inline-block;
}
.section-block {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 40px; 
    -moz-column-gap: 40px; 
    column-gap: 40px;
    width: 320px;
    margin: 0 auto;
}

＆＃13;

使用css对齐动态生成的元素

2 个答案: