1. Zuhause
  2. Frage und Antwort
  3. 100% Höhe SVG drückt Text aus dem Wrapper div

100% Höhe SVG drückt Text aus dem Wrapper div

2017-03-31 3 views
0

Ich habe 6 Symbole Ich möchte 3 in einer Zeile anzeigen. Die Symbolbreite sollte 20% der gesamten Zeile betragen. Es sieht gut aus, aber das Icon-Label wird aus dem Wrapper div (blaue gepunktete Linie) geschoben.100% Höhe SVG drückt Text aus dem Wrapper div

Wie kann ich den Wrapper erweitern, um das Etikett aufzunehmen?

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>

Icon labels are outside of wrapper div

Quelle

2017-03-31 Ashbury

+2

brauchen Sie 'height: 100%;' auf '# footer-Menü svg'? Sieht so aus, als ob der Inhalt darunter aus dem Elternteil geschoben wird. –

Antwort

0

Sie diese leicht lösen. Nur entfernen die Höhe 100% von #footer Svg. Sie können dies mit Calc-Methode lösen, wenn Sie die Svg Höhe 100% möchten. #footer svg {height: ber (100% - 18px);} 18px ist die Höhe von p Element und setzen margin: 0 bis # footer-Menü p

Überprüfen Sie den Code-Schnipsel für aktualisiert css Aktualisiert CSS: Sie brauchen nicht alle diese CSS, um dies zu tun. im Grunde brauchen Sie nicht Svg Höhe oder Breite hier. 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>

Quelle

2017-03-31 22:09:14

+0

Ziemlich gute Lösung! Aber .. es skaliert nicht gut. Was passiert, wenn eines der Labels 2 Zeilen benötigt? Gibt es eine andere Möglichkeit, das gleiche Layout zu erhalten, aber den Etikettentext anzupassen? – Ashbury

+0

@ Ashbury schöner Punkt. Dann entferne einfach die Höhe von #footer svg .btw du brauchst nicht alle diese css, schaue einfach auf diesen Link und schaue auf css part [https://jsfiddle.net/tjbaezid/m4aypg8L/] –

Verwandte Themen

 Verwandte Themen