如何用文本和 SVG 制作两列？答案

【问题标题】：How can I make two columns with text and an SVG?如何用文本和 SVG 制作两列？
【发布时间】：2017-11-26 20:52:19
【问题描述】：

我阅读的大多数文档只讨论如何使列仅显示文本，我怎样才能使这些列使 svg 位于左侧而文本位于最右侧？它怎么可能也是响应式的？

所需的布局：

HTML：

<div class="container">
    <div class="row">
    <div class="col">
<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="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
      </div>
      <div class="col">
<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="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
      </div>
    </div>
    </div>

CSS：

  .container {
    background-color: #000;
  }

完整代码： https://pastebin.com/THXaazNu

【问题讨论】：

@jhpratt 我已经尝试过诸如将类 boxicon 调整为 100 px 的宽度，然后将类 textthing 对齐到中心但另一列位于下方，并且在移动设备上时 svg 也是如此小。
@jhpratt 我这是我最近的尝试link
你能创建一个最小的例子吗？我 99% 确定您链接的所有代码都不是必需的。
@jhpratt pastebin.com/8BKBAixc

标签： html css svg multiple-columns

【解决方案1】：

您可以像这样简单地使用弹性和媒体查询：

.container {
  background-color: #000;
  color: #fff;
}

.row {
  display: flex;
}

.row .col {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 5px;
}

.row .col svg {
  flex: 1;
  margin: 5px;
}

@media all and (max-width:400px) { /* Change this value as per your needs */
  .row {
    flex-direction: column
  }
}

<div class="container">
  <div class="row">
    <div class="col">
      <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="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
    </div>
    <div class="col">
      <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="#efefef" d="m0 307.68503l0 0c0 -169.92975 137.75528 -307.68503 307.68503 -307.68503l0 0c81.60315 0 159.86404 32.416725 217.5662 90.11886c57.70215 57.70214 90.118835 135.96304 90.118835 217.56616l0 0c0 169.92978 -137.75525 307.68503 -307.68503 307.68503l0 0c-169.92975 0 -307.68503 -137.75525 -307.68503 -307.68503z" fill-rule="evenodd"></path><path fill="#ff9300" d="m145.55905 201.67563l0 0c0 -29.847168 24.195908 -54.043076 54.043076 -54.043076l216.16582 0l0 0c14.33313 0 28.079193 5.693802 38.214233 15.828842c10.13504 10.13504 15.828857 23.881119 15.828857 38.214233l0 216.1658c0 29.847168 -24.195923 54.04309 -54.04309 54.04309l-216.16582 0c-29.847168 0 -54.043076 -24.195923 -54.043076 -54.04309z" fill-rule="evenodd"></path><path fill="#ffb738" d="m277.81104 129.62225l0 0c0 -5.499771 4.458435 -9.958214 9.958191 -9.958214l39.831635 0l0 0c2.6410828 0 5.1739807 1.0491638 7.041504 2.9166946c1.8675232 1.8675232 2.916687 4.400429 2.916687 7.041519l0 151.01273c0 5.499756 -4.458435 9.958191 -9.958191 9.958191l-39.831635 0c-5.499756 0 -9.958191 -4.458435 -9.958191 -9.958191z" fill-rule="evenodd"></path><path fill="#ffffff" d="m369.55905 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7244263 0l0 26.0l-15.4487915 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#ffffff" d="m403.27682 423.56693l15.448822 -15.448822l15.448822 15.448822l-7.7243958 0l0 26.0l-15.448822 0l0 -26.0z" fill-rule="evenodd"></path><path fill="#efefef" d="m272.4567 119.66404l70.456696 0l0 27.968513l-70.456696 0z" fill-rule="evenodd"></path></g></svg>
      <h2 class="textthing">Fast Shipping</h2>
    </div>
  </div>
</div>

【讨论】：