flex justify-content:space-between not working

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

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

  
 
    
...
   
...
   
...
  

如果我这样做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;
}

我在最左边和最右边都有空间 - 外面的盒子没有到达边缘.如果我删除

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

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

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