文章/答案/技术大牛

发布

社区首页 >问答首页 >100%高度SVG正在将文本从包装器div中推出

问100%高度SVG正在将文本从包装器div中推出
EN

Stack Overflow用户

提问于 2017-04-01 05:32:32

回答 1查看 328关注 0票数 0

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

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

html (pug)

#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>

flexbox

html

css

svg

回答 1

Stack Overflow用户

发布于 2017-04-01 06:09:15

你可以很容易地解决这个问题。只需从#footer svg中删除高度100%即可。如果你想得到100%的高度，你可以使用svg方法来解决这个问题。#footer svg{ height:calc(100% - 18px);} 18px是p元素的高度，设置页边距:0到#页脚菜单p

查看更新css的代码片段更新的CSS:您不需要所有这些css就能完成这项工作。基本上，这里不需要svg height或width。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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/43149990

复制

相似问题

问100%高度SVG正在将文本从包装器div中推出
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问100%高度SVG正在将文本从包装器div中推出EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问100%高度SVG正在将文本从包装器div中推出
EN