Question

嗨，我有一个页面，我使用响应svgs作为图标。这是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，填充底部等于比例比例技巧。但是，svg_contatiner2会填充整个列宽。我只是想紧贴svg图标，让文字在不占用大量空间的情况下提升。

Answer 1

您需要在CSS规则clear:both;

上添加CSS属性.row

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属性适用于浮动和非浮动元素。

响应Svg图标

1 个答案: