1

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

https://jsfiddle.net/4yp65vu0/

注意这个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 图标，让文本在没有大量空间的情况下凸起。

4

1 回答 1

0

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

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

.row {
    clear:both;
}

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

有关 CSSclear属性的更多信息：

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

clear CSS 属性指定一个元素是否可以位于其前面的浮动元素旁边，或者必须在它们下方向下移动（清除）。clear 属性适用于浮动和非浮动元素。

于 2016-03-17T18:21:22.040 回答