html - 如何使用 flex 缩短这两列之间的空间?

标签 html css svg flexbox multiple-columns

这里我用 flex 创建了两列。我想消除的两列之间存在不合理的大边距。我怎样才能缩短这两列之间的空间,或者在创建这些列时 flex 是最好的选择?

HTML:

<div class="containerx">
  <div class="rowx">
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m53.14698 289.30817l0 0c0 -30.163177 24.452087 -54.61525 54.615265 -54.61525l400.8797 0c14.484894 0 28.376495 5.7540894 38.618866 15.996445c10.24231 10.24234 15.996399 24.133942 15.996399 38.618805l0 218.45453c0 30.163147 -24.452087 54.615234 -54.615265 54.615234l-400.8797 0c-30.163177 0 -54.615265 -24.452087 -54.615265 -54.615234z" fill-rule="evenodd"></path><path fill="#ffffff" d="m204.58005 289.7482l0 0c0 -4.972107 4.0307007 -9.002808 9.002808 -9.002808l189.2385 0c2.3876953 0 4.677582 0.94851685 6.3659363 2.6368713c1.6883545 1.6883545 2.6368713 3.978241 2.6368713 6.3659363l0 36.010162c0 4.972107 -4.0307007 9.002808 -9.002808 9.002808l-189.2385 0c-4.972107 0 -9.002808 -4.0307007 -9.002808 -9.002808z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m284.31497 106.27559l46.929108 0l0 131.08661l-46.929108 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m138.04199 101.84252l340.37796 0l0 51.37008l-340.37796 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m139.64789 101.843315l39.590546 25.196846l-87.055115 136.81891l-39.59055 -25.196854z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m437.32596 124.8802l39.748047 -24.944885l86.20468 137.35434l-39.747986 24.94487z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m53.14762 237.36298l46.92913 0l0 162.17322l-46.92913 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m517.14764 237.36298l46.92914 0l0 162.17322l-46.92914 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
    </div>
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m116.58268 188.74545l53.511803 -11.968491l62.07875 277.22833l-53.51181 11.968506z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m17.018373 231.61154l0 -54.83464l151.30708 0l0 54.83464z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m180.58792 466.96588l0 -54.834656l350.77164 0l0 54.834656z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m555.7723 192.5512l52.629944 15.370071l-75.275635 258.04724l-52.629913 -15.370056z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m406.56168 306.41733l0 -117.20276c0 -62.137474 -50.372375 -112.50984 -112.50983 -112.50984l-80.36418 0l0 -32.14567l-64.291336 64.291336l64.291336 64.29134l0 -32.145676l80.36418 0l0 0c26.63034 0 48.218506 21.588165 48.218506 48.218506l0 117.20276z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m207.06029 552.17334l0 0c0 -34.989624 28.3647 -63.35434 63.354324 -63.35434l0 0c16.802612 0 32.917053 6.6748047 44.79828 18.55606c11.881256 11.881226 18.55606 27.995667 18.55606 44.79828l0 0c0 34.989624 -28.364685 63.35431 -63.35434 63.35431l0 0c-34.989624 0 -63.354324 -28.364685 -63.354324 -63.35431z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m386.62985 552.17334l0 0c0 -34.989624 28.364685 -63.35434 63.35431 -63.35434l0 0c16.802612 0 32.917053 6.6748047 44.79828 18.55606c11.881256 11.881226 18.55606 27.995667 18.55606 44.79828l0 0c0 34.989624 -28.364685 63.35431 -63.35434 63.35431l0 0c-34.989624 0 -63.35431 -28.364685 -63.35431 -63.35431z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Returns Accepted on Most Items</h2>
    </div>
  </div>
  <div class="rowx">
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m103.97628 51.52887l408.45145 0l0 409.96536l-204.22574 102.4913l-204.22571 -102.4913z" fill-rule="evenodd"></path><path fill="#ffffff" d="m434.4318 158.4685l29.35434 29.354324l-202.67719 202.67717l-29.354324 -29.35434z" fill-rule="evenodd"></path><path fill="#ffffff" d="m158.53674 289.14267l29.354324 -29.35434l101.48033 101.480316l-29.35434 29.35434z" fill-rule="evenodd"></path></g></svg>

      <h2 class="textthing">Secure Transaction</h2>
    </div>
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m294.99213 128.58531l295.937 0l0 39.716522l-295.937 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m294.99213 168.30183l295.937 0l0 39.716537l-295.937 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m294.99213 208.01837l295.937 0l0 39.716537l-295.937 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m294.99213 247.73491l295.937 0l0 39.716537l-295.937 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m294.99213 287.45145l295.937 0l0 39.716522l-295.937 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m25.52756 327.16797l565.3858 0l0 39.716553l-565.3858 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m25.52756 366.88452l565.3858 0l0 39.716522l-565.3858 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m25.52756 406.60104l565.3858 0l0 39.716553l-565.3858 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m25.507874 446.3176l565.3858 0l0 39.716522l-565.3858 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m25.509186 128.58792l269.48032 0l0 198.58267l-269.48032 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m48.220516 156.04959l15.96442 1.0681152E-4l4.933174 -15.170425l4.933174 15.170425l15.9644165 -1.0681152E-4l-12.915543 9.375732l4.9333725 15.17038l-12.915421 -9.375916l-12.915424 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m95.422615 156.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.933174 15.170425l15.9644165 -1.0681152E-4l-12.91555 9.375732l4.9333725 15.17038l-12.915413 -9.375916l-12.915428 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m142.62471 156.04959l15.964432 1.0681152E-4l4.9331665 -15.170425l4.933182 15.170425l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m189.82681 156.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.9331665 15.170425l15.964432 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m237.02892 156.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.9331665 15.170425l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915405 -9.375916l-12.915421 9.375916l4.933365 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m71.421776 198.67595l15.9644165 1.0681152E-4l4.933174 -15.170441l4.933182 15.170441l15.9644165 -1.0681152E-4l-12.91555 9.375732l4.93338 15.170364l-12.915428 -9.3759l-12.915421 9.3759l4.93338 -15.170364z" fill-rule="evenodd"></path><path fill="#ffffff" d="m118.62388 198.67595l15.964409 1.0681152E-4l4.933182 -15.170441l4.933182 15.170441l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.170364l-12.915421 -9.3759l-12.915421 9.3759l4.93338 -15.170364z" fill-rule="evenodd"></path><path fill="#ffffff" d="m165.82597 198.67595l15.9644165 1.0681152E-4l4.933182 -15.170441l4.9331665 15.170441l15.964432 -1.0681152E-4l-12.915558 9.375732l4.93338 15.170364l-12.915421 -9.3759l-12.915421 9.3759l4.93338 -15.170364z" fill-rule="evenodd"></path><path fill="#ffffff" d="m213.02808 198.67595l15.9644165 1.0681152E-4l4.933182 -15.170441l4.9331665 15.170441l15.9644165 -1.0681152E-4l-12.915543 9.375732l4.93338 15.170364l-12.915421 -9.3759l-12.915436 9.3759l4.93338 -15.170364z" fill-rule="evenodd"></path><path fill="#ffffff" d="m48.220516 236.04959l15.96442 1.0681152E-4l4.933174 -15.170425l4.933174 15.170425l15.9644165 -1.0681152E-4l-12.915543 9.375732l4.9333725 15.17038l-12.915421 -9.375916l-12.915424 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m95.422615 236.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.933174 15.170425l15.9644165 -1.0681152E-4l-12.91555 9.375732l4.9333725 15.17038l-12.915413 -9.375916l-12.915428 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m142.62471 236.04959l15.964432 1.0681152E-4l4.9331665 -15.170425l4.933182 15.170425l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m189.82681 236.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.9331665 15.170425l15.964432 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m237.02892 236.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.9331665 15.170425l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915405 -9.375916l-12.915421 9.375916l4.933365 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m71.421776 278.67593l15.9644165 1.2207031E-4l4.933174 -15.170441l4.933182 15.170441l15.9644165 -1.2207031E-4l-12.91555 9.375763l4.93338 15.170349l-12.915428 -9.375916l-12.915421 9.375916l4.93338 -15.170349z" fill-rule="evenodd"></path><path fill="#ffffff" d="m118.62388 278.67593l15.964409 1.2207031E-4l4.933182 -15.170441l4.933182 15.170441l15.9644165 -1.2207031E-4l-12.915558 9.375763l4.93338 15.170349l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.170349z" fill-rule="evenodd"></path><path fill="#ffffff" d="m165.82597 278.67593l15.9644165 1.2207031E-4l4.933182 -15.170441l4.9331665 15.170441l15.964432 -1.2207031E-4l-12.915558 9.375763l4.93338 15.170349l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.170349z" fill-rule="evenodd"></path><path fill="#ffffff" d="m213.02808 278.67593l15.9644165 1.2207031E-4l4.933182 -15.170441l4.9331665 15.170441l15.9644165 -1.2207031E-4l-12.915543 9.375763l4.93338 15.170349l-12.915421 -9.375916l-12.915436 9.375916l4.93338 -15.170349z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">US Seller</h2>
    </div>
  </div>
</div>

CSS:

  .boxicon {
    height: 150px;
    margin: 5px;
  }

  .textthing {
    text-align: center;
    display: block;
    margin: 10px;
    color: white;
    flex-grow: 1;
  }


  .rowx {
    display: flex;
  }

  .colx {
    flex-grow: 1;
    display: flex;
    align-items: center;
    background-color: silver;
    margin: 0 5%;
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px;
  }

  @media screen and (max-width: 800px) {
    .colx {
        margin: 10px 15px;
      }
      .rowx {
      flex-direction: column;

    }
  }

最佳答案

只需将 margin 中的第二个值降低到 .colx 上即可,这是 margin-leftmargin-right 的简写。这是您的示例中的 5%,我已经使用 0.4% 来尽可能匹配垂直边距,但可以随意调整以适应。

.colx {
  margin: 0 0.4%;
}

这种 margin 减少可以在下面看到
(点击 Run code snippet 然后 Full page 查看 margin 差异):

.boxicon {
  height: 150px;
  margin: 5px;
}

.textthing {
  text-align: center;
  display: block;
  margin: 10px;
  color: white;
  flex-grow: 1;
}

.rowx {
  display: flex;
}

.colx {
  flex-grow: 1;
  display: flex;
  align-items: center;
  background-color: silver;
  margin: 0 0.4%;
  padding: 10px;
  border-radius: 10px;
  margin-top: 10px;
}

@media screen and (max-width: 800px) {
  .colx {
    margin: 10px 15px;
  }
  .rowx {
    flex-direction: column;
  }
}
<div class="containerx">
  <div class="rowx">
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m53.14698 289.30817l0 0c0 -30.163177 24.452087 -54.61525 54.615265 -54.61525l400.8797 0c14.484894 0 28.376495 5.7540894 38.618866 15.996445c10.24231 10.24234 15.996399 24.133942 15.996399 38.618805l0 218.45453c0 30.163147 -24.452087 54.615234 -54.615265 54.615234l-400.8797 0c-30.163177 0 -54.615265 -24.452087 -54.615265 -54.615234z" fill-rule="evenodd"></path><path fill="#ffffff" d="m204.58005 289.7482l0 0c0 -4.972107 4.0307007 -9.002808 9.002808 -9.002808l189.2385 0c2.3876953 0 4.677582 0.94851685 6.3659363 2.6368713c1.6883545 1.6883545 2.6368713 3.978241 2.6368713 6.3659363l0 36.010162c0 4.972107 -4.0307007 9.002808 -9.002808 9.002808l-189.2385 0c-4.972107 0 -9.002808 -4.0307007 -9.002808 -9.002808z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m284.31497 106.27559l46.929108 0l0 131.08661l-46.929108 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m138.04199 101.84252l340.37796 0l0 51.37008l-340.37796 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m139.64789 101.843315l39.590546 25.196846l-87.055115 136.81891l-39.59055 -25.196854z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m437.32596 124.8802l39.748047 -24.944885l86.20468 137.35434l-39.747986 24.94487z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m53.14762 237.36298l46.92913 0l0 162.17322l-46.92913 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m517.14764 237.36298l46.92914 0l0 162.17322l-46.92914 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
    </div>
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m116.58268 188.74545l53.511803 -11.968491l62.07875 277.22833l-53.51181 11.968506z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m17.018373 231.61154l0 -54.83464l151.30708 0l0 54.83464z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m180.58792 466.96588l0 -54.834656l350.77164 0l0 54.834656z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m555.7723 192.5512l52.629944 15.370071l-75.275635 258.04724l-52.629913 -15.370056z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m406.56168 306.41733l0 -117.20276c0 -62.137474 -50.372375 -112.50984 -112.50983 -112.50984l-80.36418 0l0 -32.14567l-64.291336 64.291336l64.291336 64.29134l0 -32.145676l80.36418 0l0 0c26.63034 0 48.218506 21.588165 48.218506 48.218506l0 117.20276z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m207.06029 552.17334l0 0c0 -34.989624 28.3647 -63.35434 63.354324 -63.35434l0 0c16.802612 0 32.917053 6.6748047 44.79828 18.55606c11.881256 11.881226 18.55606 27.995667 18.55606 44.79828l0 0c0 34.989624 -28.364685 63.35431 -63.35434 63.35431l0 0c-34.989624 0 -63.354324 -28.364685 -63.354324 -63.35431z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m386.62985 552.17334l0 0c0 -34.989624 28.364685 -63.35434 63.35431 -63.35434l0 0c16.802612 0 32.917053 6.6748047 44.79828 18.55606c11.881256 11.881226 18.55606 27.995667 18.55606 44.79828l0 0c0 34.989624 -28.364685 63.35431 -63.35434 63.35431l0 0c-34.989624 0 -63.35431 -28.364685 -63.35431 -63.35431z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Returns Accepted on Most Items</h2>
    </div>
  </div>
  <div class="rowx">
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m103.97628 51.52887l408.45145 0l0 409.96536l-204.22574 102.4913l-204.22571 -102.4913z" fill-rule="evenodd"></path><path fill="#ffffff" d="m434.4318 158.4685l29.35434 29.354324l-202.67719 202.67717l-29.354324 -29.35434z" fill-rule="evenodd"></path><path fill="#ffffff" d="m158.53674 289.14267l29.354324 -29.35434l101.48033 101.480316l-29.35434 29.35434z" fill-rule="evenodd"></path></g></svg>

      <h2 class="textthing">Secure Transaction</h2>
    </div>
    <div class="colx">
      <svg class="boxicon" version="1.1" viewBox="0.0 0.0 616.4015748031496 615.514435695538" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><clipPath id="p.0"><path d="m0 0l616.40155 0l0 615.51447l-616.40155 0l0 -615.51447z" clip-rule="nonzero"></path></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l616.40155 0l0 615.51447l-616.40155 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m294.99213 128.58531l295.937 0l0 39.716522l-295.937 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m294.99213 168.30183l295.937 0l0 39.716537l-295.937 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m294.99213 208.01837l295.937 0l0 39.716537l-295.937 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m294.99213 247.73491l295.937 0l0 39.716537l-295.937 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m294.99213 287.45145l295.937 0l0 39.716522l-295.937 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m25.52756 327.16797l565.3858 0l0 39.716553l-565.3858 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m25.52756 366.88452l565.3858 0l0 39.716522l-565.3858 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m25.52756 406.60104l565.3858 0l0 39.716553l-565.3858 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m25.507874 446.3176l565.3858 0l0 39.716522l-565.3858 0z" fill-rule="evenodd"></path><path fill="#cfe2f3" d="m25.509186 128.58792l269.48032 0l0 198.58267l-269.48032 0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m48.220516 156.04959l15.96442 1.0681152E-4l4.933174 -15.170425l4.933174 15.170425l15.9644165 -1.0681152E-4l-12.915543 9.375732l4.9333725 15.17038l-12.915421 -9.375916l-12.915424 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m95.422615 156.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.933174 15.170425l15.9644165 -1.0681152E-4l-12.91555 9.375732l4.9333725 15.17038l-12.915413 -9.375916l-12.915428 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m142.62471 156.04959l15.964432 1.0681152E-4l4.9331665 -15.170425l4.933182 15.170425l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m189.82681 156.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.9331665 15.170425l15.964432 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m237.02892 156.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.9331665 15.170425l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915405 -9.375916l-12.915421 9.375916l4.933365 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m71.421776 198.67595l15.9644165 1.0681152E-4l4.933174 -15.170441l4.933182 15.170441l15.9644165 -1.0681152E-4l-12.91555 9.375732l4.93338 15.170364l-12.915428 -9.3759l-12.915421 9.3759l4.93338 -15.170364z" fill-rule="evenodd"></path><path fill="#ffffff" d="m118.62388 198.67595l15.964409 1.0681152E-4l4.933182 -15.170441l4.933182 15.170441l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.170364l-12.915421 -9.3759l-12.915421 9.3759l4.93338 -15.170364z" fill-rule="evenodd"></path><path fill="#ffffff" d="m165.82597 198.67595l15.9644165 1.0681152E-4l4.933182 -15.170441l4.9331665 15.170441l15.964432 -1.0681152E-4l-12.915558 9.375732l4.93338 15.170364l-12.915421 -9.3759l-12.915421 9.3759l4.93338 -15.170364z" fill-rule="evenodd"></path><path fill="#ffffff" d="m213.02808 198.67595l15.9644165 1.0681152E-4l4.933182 -15.170441l4.9331665 15.170441l15.9644165 -1.0681152E-4l-12.915543 9.375732l4.93338 15.170364l-12.915421 -9.3759l-12.915436 9.3759l4.93338 -15.170364z" fill-rule="evenodd"></path><path fill="#ffffff" d="m48.220516 236.04959l15.96442 1.0681152E-4l4.933174 -15.170425l4.933174 15.170425l15.9644165 -1.0681152E-4l-12.915543 9.375732l4.9333725 15.17038l-12.915421 -9.375916l-12.915424 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m95.422615 236.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.933174 15.170425l15.9644165 -1.0681152E-4l-12.91555 9.375732l4.9333725 15.17038l-12.915413 -9.375916l-12.915428 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m142.62471 236.04959l15.964432 1.0681152E-4l4.9331665 -15.170425l4.933182 15.170425l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m189.82681 236.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.9331665 15.170425l15.964432 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m237.02892 236.04959l15.9644165 1.0681152E-4l4.933182 -15.170425l4.9331665 15.170425l15.9644165 -1.0681152E-4l-12.915558 9.375732l4.93338 15.17038l-12.915405 -9.375916l-12.915421 9.375916l4.933365 -15.17038z" fill-rule="evenodd"></path><path fill="#ffffff" d="m71.421776 278.67593l15.9644165 1.2207031E-4l4.933174 -15.170441l4.933182 15.170441l15.9644165 -1.2207031E-4l-12.91555 9.375763l4.93338 15.170349l-12.915428 -9.375916l-12.915421 9.375916l4.93338 -15.170349z" fill-rule="evenodd"></path><path fill="#ffffff" d="m118.62388 278.67593l15.964409 1.2207031E-4l4.933182 -15.170441l4.933182 15.170441l15.9644165 -1.2207031E-4l-12.915558 9.375763l4.93338 15.170349l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.170349z" fill-rule="evenodd"></path><path fill="#ffffff" d="m165.82597 278.67593l15.9644165 1.2207031E-4l4.933182 -15.170441l4.9331665 15.170441l15.964432 -1.2207031E-4l-12.915558 9.375763l4.93338 15.170349l-12.915421 -9.375916l-12.915421 9.375916l4.93338 -15.170349z" fill-rule="evenodd"></path><path fill="#ffffff" d="m213.02808 278.67593l15.9644165 1.2207031E-4l4.933182 -15.170441l4.9331665 15.170441l15.9644165 -1.2207031E-4l-12.915543 9.375763l4.93338 15.170349l-12.915421 -9.375916l-12.915436 9.375916l4.93338 -15.170349z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">US Seller</h2>
    </div>
  </div>

希望对您有所帮助! :)

关于html - 如何使用 flex 缩短这两列之间的空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47585056/

相关文章:

html - 如何旋转文本并正确定位? (CSS,HTML)

javascript - jquery 基本画廊动画

html - 更改轮播宽度

php - 从数组中提取信息

javascript - 如何使用标记和悬停工具提示创建 svg map

html - Polymer 中的自定义属性不起作用

javascript - 如果从不执行,即使它是真的

jquery - IE7 和 "jaggies"围绕分层 PNG(使用 jQuery)

带有 SVG 圆的 Angular2 *ngFor

javascript - 访问对象以传递给函数的最佳方法