1

こんにちは、レスポンシブ svg をアイコンとして使用するページがあります。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内にそれらを絶対に配置しました。ただし、svg_contatiner2 は列幅全体を埋めます。svg アイコンをぴったりと合わせて、大量のスペースなしでテキストを膨らませたいだけです。

4

1 に答える 1

0

clear:both;CSS ルールにCSS プロパティを追加する必要があります.row

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

.row {
    clear:both;
}

を使用すると、要素が互いに折りたたまれることなく、クラスの行レイアウトを維持clear:both;できます。.row

clearCSSプロパティの詳細:

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

CSS の clear プロパティは、要素がその前にあるフローティング要素の隣に配置できるか、またはその下に移動 (クリア) する必要があるかを指定します。clear プロパティは、フローティング要素と非フローティング要素の両方に適用されます。

于 2016-03-17T18:21:22.040 に答える