flex justify-content:space-between not working

Question

我试图获得三个盒子,使用弹性盒将div通过div分配给该div的EDGES.我需要使用justify-content:space-between; 按照w3schools

但是我有一个额外的div(由wordpress生成)所以我的html是:

<div class="locationHolder">
  <div class="textwidget"> <!-- extra div-->
    <div class="locationSquare">...</div>
   <div class="locationSquare">...</div>
   <div class="locationSquare">...</div>
  </div>
</div>

如果我这样做css:

page-template-home-page .locationHolder .textwidget{
 display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width:100%;
    background:green;
}

.page-template-home-page .locationSquare {
    width:30.942%;
    background:#fff;
    margin:0;
}

我在最左边和最右边都有空间 - 外面的盒子没有到达边缘.如果我删除<div class="textwidget">它</div>然后它工作正常.

如果我把locationHolder作为display:flex等它就不起作用了

我可以用jQ删除额外的div但是有一个css解决方案来克服这个问题吗？

Answer 1

添加.textwidget::before, .textwidget::after { content: none; }.您已content: ""在第1341行添加了此元素并且它会中断flex.或者只是.textwidget::before, .textwidget::after从1341行删除;)