我的div之间的间隔不适用于float和margin

Question

我有两个这样的div：

第一格：

<div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px">
  <div class="container-fluid">
    <div class="row">
      <span class="user" style="color:#000a75;font-weight:bold">Général</span>
    </div>

  </div>
</div>

第二个div：

<div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
  <i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
</div>

这两个div位于：

<a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;width:400px;margin-left:4px;margin-right:0em" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a">
  <div class="col-md-6" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;float:left;margin-left:2px">
    <div class="container-fluid">
      <div class="row">
        <span class="user" style="color:#000a75;font-weight:bold">Général</span>
      </div>

    </div>
  </div>

  <!--Collaspe zone-->
  <div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
    <i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
  </div>

</a>

外观如下：

我希望div之间的间距大于此间距，所以我尝试了float和margin，但是我遇到了同样的问题。

所以我希望现在更多的扩展图标位于右边距0，因为它位于中间。

Answer 1

我认为您的代码未完全在此处发布，因此我们在查看方式上有所不同。 但我在您的代码中看到，宽度已设置为固定值400px。这就是为什么图标无法向右移动的原因。请删除width:400px;标签中的a。

也许当您在旁边运行代码时，a标记已设置为display: block/inline-block .etc..，因此您可以看到它不能向右移动。那就是为什么我们不明白你想要什么。

Answer 2

像这样？我需要更多细节。
刚刚从引导程序中使用了d-flex。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<!-- just to show it whit boostrap -->

<a class="mdc-list-item" data-placement="top" title="Acceuil" style="cursor:pointer;" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a">
  <div class="d-flex" id="owner_name_76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" style="visibility: visible;">
    <div>
      <span class="user" style="color:#000a75;font-weight:bold">Général</span>
    </div>
        <!--Collaspe zone-->
    <div class="ml-auto px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false">
      <i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
    </div>
  </div>



</a>

Answer 3

My problem was solved ! i followed this exemple

<div class="container">
   <div class="row">
      <div class="col-sm">
         <div class="row">
            <span class="user" style="color:#000a75;font-weight:bold">Général</span>
         </div>
      </div>
      <div class="col-sm">
         <div class="col-md-2 px-4 chevron-down collapsed" data-toggle="collapse" data-target="#76a62a154a220a104a16a203a196a25a92a71a58a216a222a172a64a" aria-expanded="false" style="float:right;margin-right:2px">
            <i class="material-icons float-right material-expand ripple" style="color: #0047FD !important;margin-right:2px">expand_more</i>
         </div>
      </div>
   </div>
</div>