左下にテキストを折り返すdiv？

Question

私はこの質問が以前に答えられたことを実感します。しかし、私の解決策はありませんでした。あるいは、私はそれを正しいとはしていません。

とにかく。左下隅のdivの周りのコンテナにテキストを折り返す必要があります。ラップしていないので、BL divの余白/上端/上端を上げることはできません。絶対位置を決めることはできません。

は、私はこのように見て、それを必要とする：私はBBコードを使用するサイト上でこれをコーディングしてい

------------------ 
|text text text t| 
|ext text text te| 
|xt text text tex| 
|---|t text text | 
| |text text te| 
----------------- 

を、ので、私はHTMLごとに何ができるかでは限られた少しだし、私はできませんjavascript/jqueryを使用してください。

フィドルhere、以下のコードも添付しました。

.bg { 
 
    width: 310px; 
 
    height: 200px; 
 
    background-color: #FCF2FF; 
 
    position: relative; 
 
    font-family: tahoma, arial; 
 
    font-size: 11px; 
 
    color: #772D99; 
 
} 
 

 
.title { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 5px; 
 
    text-align: left; 
 
    font-weight: bold; 
 
    font-size: 23px; 
 
    font-variant: small-caps; 
 
} 
 

 
.desc { 
 
    position: relative; 
 
    top: 35px; 
 
    left: 0px; 
 
    width: 115px; 
 
    height: 70px; 
 
    border: 1px dotted #B07ACC; 
 
    background-color: #FCF2FF; 
 
    padding: 3px; 
 
    padding-top: 70px; 
 
    box-sizing: border-box; 
 
} 
 

 
.pkmn { 
 
    position: relative; 
 
    float: left; 
 
    padding: 3px; 
 
    width: 32px; 
 
    height: 32px; 
 
    border: 1px dotted #B07ACC; 
 
    border-radius: 100%; 
 
    background-color: #FCF2FF; 
 
    overflow: hidden; 
 
}

<div class="bg"> 
 
    <div class="title">Title Here</div> 
 
    <div class="desc"> 
 
    <div class="pkmn"> 
 
     <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" /> 
 
    </div> 
 
    text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
    </div> 
 
</div>

Answer 1

ちょうどあなたの要素にfloat: left;position: relative;を追加して、以下のコードで見られるようにスペーサ要素を追加します。

.bg { 
 
    width: 310px; 
 
    height: 200px; 
 
    background-color: #FCF2FF; 
 
    position: relative; 
 
    font-family: tahoma, arial; 
 
    font-size: 11px; 
 
    color: #772D99; 
 
} 
 
.title { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 5px; 
 
    text-align: left; 
 
    font-weight: bold; 
 
    font-size: 23px; 
 
    font-variant: small-caps; 
 
} 
 
.desc { 
 
    position: relative; 
 
    top: 35px; 
 
    left: 0px; 
 
    width: 115px; 
 
    height: 165px; 
 
    border: 1px dotted #B07ACC; 
 
    background-color: #FCF2FF; 
 
    padding: 3px; 
 
    box-sizing: border-box; 
 
} 
 
.pkmn { 
 
    margin-left: -3px; 
 
    margin-right: 3px; 
 
    padding: 3px; 
 
    width: 32px; 
 
    height: 32px; 
 
    border: 1px dotted #B07ACC; 
 
    border-radius: 100%; 
 
    background-color: #FCF2FF; 
 
}

<div class="bg"> 
 
    <div class="title">Title Here</div> 
 
    <div class="desc"> 
 
    <!-- I used CSS, but inline will serve well here --> 
 
    <div style="float: left; width: 0px; height: 120px"></div> 
 
    <div style="float: left; clear: left"> 
 
     <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" class="pkmn"/> 
 
    </div> 
 
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
    </div> 
 
</div>

Answer 2

のdiv内のコンテンツ滞在し、div要素の必要な高さを取るためにdisplay:inline-blockを追加するために、コンテンツの必要な高さを取り、padding-topを削除するにはheightを削除します。

CSSやHTMLで逃した私何かはそうフィドルコードで見てみる場合は

Working fiddle

UDATE CSSの一部

.desc { 
    position: relative; 
    top: 35px; 
    left: 0px; 
    width: 115px; 
    /* height: 70px; */ 
    border: 1px dotted #B07ACC; 
    display:inline-block; 
    background-color: #FCF2FF; 
    padding: 3px; 
    /* padding-top: 70px; */ 
    box-sizing: border-box; 
} 

更新HTML部分

<div class="bg"> 
    <div class="title">Title Here</div> 
    <div class="desc"> 
    text text text text text text text text text text text text text text text text text text text text text text text text text text text 
    <div class="pkmn"> 
     <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" /> 
    </div> 
    </div> 
</div> 

.bg { 
 
    width: 310px; 
 
    height: 200px; 
 
    background-color: #FCF2FF; 
 
    position: relative; 
 
    font-family: tahoma, arial; 
 
    font-size: 11px; 
 
    color: #772D99; 
 
} 
 

 
.title { 
 
    position: absolute; 
 
    left: 10px; 
 
    top: 5px; 
 
    text-align: left; 
 
    font-weight: bold; 
 
    font-size: 23px; 
 
    font-variant: small-caps; 
 
} 
 

 
.desc { 
 
    position: relative; 
 
    top: 35px; 
 
    left: 0px; 
 
    width: 115px; 
 
    /* height: 70px; */ 
 
    border: 1px dotted #B07ACC; 
 
    display:inline-block; 
 
    background-color: #FCF2FF; 
 
    padding: 3px; 
 
    /* padding-top: 70px; */ 
 
    box-sizing: border-box; 
 
} 
 

 
.pkmn { 
 
    position: relative; 
 
    float: left; 
 
    padding: 3px; 
 
    width: 32px; 
 
    height: 32px; 
 
    border: 1px dotted #B07ACC; 
 
    border-radius: 100%; 
 
    background-color: #FCF2FF; 
 
    overflow: hidden; 
 
}

<div class="bg"> 
 
    <div class="title">Title Here</div> 
 
    <div class="desc"> 
 
    text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
    <div class="pkmn"> 
 
     <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" /> 
 
    </div> 
 
    </div> 
 
</div>