响应式 Svg 图标答案

【问题标题】：Responsive Svg Icons响应式 Svg 图标
【发布时间】：2016-03-17 11:28:36
【问题描述】：

您好，我有一个页面，我使用响应式 svg 作为图标。这是 js.fiddle：

注意这个 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;
}

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

我在 svg 图标和周围的容器周围放置了一个红色边框。为了让它们反应灵敏，我将它们绝对定位在一个相对 div，使用 padding-bottom 等于比例比率技巧。然而， svg_contatiner2 填充了整个列宽。我只是想紧贴 svg 图标，让文本在没有大量空间的情况下隆起。

【问题讨论】：

标签： svg responsive-images

【解决方案1】：

您需要在 CSS 规则 .row 上添加 CSS 属性 clear:both;

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

.row {
    clear:both;
}

clear:both; 将允许您的 .row 类保持其行布局，而不会让元素相互折叠。

有关 CSS clear 属性的更多信息：

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

clear CSS 属性指定一个元素是可以紧挨着它之前的浮动元素还是必须向下移动（清除）到它们下方。 clear 属性适用于浮动和非浮动元素。

【讨论】：