Question

我如何制作div的元素，例如来自Angular（中间空间）的div，占据整个空间但是使用＆＃34; pure＆＃34; CSS？

我的方法如下：fiddle example

HTML

<div class="container">
  <div class="boxes">
    <div class="nested-fields pull-left">
      <div class="fields">
        <textarea>
            bla bla bla
        </textarea>
      </div>
    </div>
    <div class="nested-fields">
      <div class="fields">
        <textarea>
            bla bla bla
        </textarea>
      </div>
    </div>
    <div class="nested-fields pull-right">
      <div class="fields">
        <textarea>
            bla bla bla
        </textarea>
      </div>
    </div>
  </div>
</div>

CSS

.container {
    width: 100%;
    border: 1px solid black;
}

.nested-fields {
  display: inline-block;
}

.boxes {
  text-align:center;
}

.pull-left {
    float: left !important;
}

.pull-right {
    float: right !important;
}

然而，一旦我添加了另一个嵌套字段，它就不会看起来像我想要的那样。也就是说，我希望它的行为与中心子对齐之间的Angular空间完全相同。

最终目的是添加动态字段，div应该重新调整其子对齐。

有关如何实现这一目标的任何提示？谢谢！

Answer 1

这是flexbox解决的问题之一，将容器display:flex和justify-content设置为space-between，并且不需要所有其他标记，如您所见这JS Fiddle

.container {
  width: 100%;
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}

<div class="container">
  <textarea>bla bla bla</textarea>
  <textarea>bla bla bla</textarea>
  <textarea>bla bla bla</textarea>
</div>

占据div中心之间的空间

1 个答案: