2016-05-26 4 views
0

2つのdivを含むdivがあります。 1つは、凡例のように上端に座らせるための値です。しかし、それの隣にあるdivは、それを左の1つの列に保持します。本当に、私は、すべての紫色のスペースを埋めるために、テキストを囲むようにしたい。1つのdivを別のdivに折り返す

//jsfiddle.net/ucfnL0px/1/embed/ 

答えて

2

あなたがdiv.CornPara内のあなたのイメージを入れて、float: left;に設定し、テキストがその周りに折り返されます必要があります。ここで私が持っているものです。

は、ソリューションを簡単にすることができ、このFiddle

HTML

<div class="ServContent"> 
    <div class="CornPara"> 
     <img class="corner" src="#" /> 
     <h1 class="SubServ">Lorem</h1> 
     ...More content... 
    </div> 
</div> 

CSS

img.corner { 
    ... 
    float: left; 
} 
+0

は本当に本当に正しい –

+0

美しく見えます!ありがとう:) – Thomh

0

を参照してください。

「CornPara」div内に画像を置くだけで、左に浮動小数点を設定し、相対位置の代わりに負のマージンを使用します。

デモここにあるhttp://jsfiddle.net/hmsh0x0z/1/

HTML

<div class="ServContent"> 
<div class="CornPara"> 
    <img class="corner" src="#" /> 
    ... 
</div> 
</div> 

CSS

img.corner { 
    margin-top: -20px; 
    margin-left: -20px; 
    margin-right: 20px; 
    float: left; 
    ... 
} 
+0

また、マージン左、右などの使用としてこの提案をupvotingは、画像の周りのスペースを削除することについてのフォローアップの質問に便利でした。 – Thomh

関連する問題