响应Svg图标

Question

Hi I have page where I use responsive svgs as icons. Here is the js.fiddle:

https://jsfiddle.net/4yp65vu0/

Pay attention to this CSS:

.svg-content2 {
   display:inline-block;
   position:absolute;
   top:0;
   left:0;
   border:1px solid red;
}

.svg-container2 {
   display:inline-block;
   position:relative;
   width:100%;
   padding-bottom:100%;
   vertical-align:middle;
   border:1px solid red;
}

and the HTML:

<div class="row">
   <div class="col half">
      <div class="svg-container2">
         <object data="images/money_ico.svg" type="image/svg+xml" width="30%"                         height="30%" class="svg-content2"> 
         </object>
      </div>
      <span class="benefits">Charge your own<br>rates per minute</span>
   </div>

I've put a red border around the svg icons and also the surrounding containers. In order for them to be responsive, I've positioned them absolutely inside a relative div, with padding-bottom equals proportions ratio trick. The svg_contatiner2 however, fills the entire column width. I just want to snugly fit the svg icons and have the text bump up without the huge amount of space.

Answer 1

You need to add the CSS property clear:both; on your CSS rule .row

https://jsfiddle.net/4yp65vu0/3/

.row {
    clear:both;
}

The clear:both; will allow your .row class to keep its row layout without having elements collapse into each other.

More info on the CSS clear property:

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.