100％高度SVG将文本推出包装div

时间：2017-03-31 21:32:32

标签： html css svg flexbox

我有6个图标我想要连续显示3个。图标宽度应为总行数的20％。它看起来没问题，但图标标签正被推出包装div（蓝色虚线）。

如何展开包装器以包含标签？

html（帕格）

#footer-menu
  each category in categories
    .icon
      .wrapper
        include ../../assets/images/icons/bank_icon.svg
        p 
          =category.title


    
#footer-menu {

  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: 30px 0;
  width: 100%;
}
#footer-menu p {
  margin-bottom: 0;
}

  #footer-menu {
    padding: 30px 0;
    background: red;
  }
  #footer-menu .icon {
  box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    width: 20%;
    border: solid 1px yellow;
  }
  #footer-menu .icon img {
    width: 100%;
  }
  #footer-menu .icon:nth-child(3n+3) {
    margin-left: 20%;
  }
  #footer-menu .icon:nth-child(3n+1) {
    margin-right: 20%;
  }
  #footer-menu svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  #footer-menu .wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    border: dashed 2px blue;
  }
<div class="col-md-8"><div id="footer-menu"><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Banking</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Savings</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Loans</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Credit</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Budgeting</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
    <style>
      .a {
        fill: none;
        stroke: #2d1d24;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 6px;
      }
    </style>
  </defs>
  <title>Asset 3</title>
  <g>
    <circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
    <path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Investing</p></div></div></div></div>

Icon labels are outside of wrapper div

1 个答案:

答案 0 :(得分：0)

你很容易解决这个问题。只需从

100％的高度。如果您希望svg高度为100％，可以使用 calc方法解决此问题。 #footer svg {height：calc（100％ - 18px）;} 18px是p元素的高度并设置margin：0到＃footer-menu p

检查代码段已更新的CSS  更新了CSS：您不需要所有这些css来完成这项工作。基本上你不需要 svg高度或宽度。 Live On Fiddle 

body{
 margin:0;
}
#footer-menu {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 100%;
background: red;     
}
   #footer-menu .icon{
flex: 0 1 25%;
margin: .5em;
align-self: center;
text-align: center;
border: dashed 2px blue;
}
#footer-menu p{
  margin:0;
}
<div class="col-md-8"><div id="footer-menu"><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Banking</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Savings</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Loans</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Credit</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Budgeting</p></div></div><div class="icon"><div class="wrapper"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3">
  <defs>
<style>
  .a {
    fill: none;
    stroke: #2d1d24;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 6px;
  }
</style>
  </defs>
  <title>Asset 3</title>
  <g>
<circle class="a" cx="101.15" cy="101.15" r="98.15"></circle>
<path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"></path>
  </g>
</svg>
<p> Investing</p></div></div></div></div>

相关问题
最新问题