围绕左下角div围绕文本？

Question

我意识到这个问题已经回答过。但是，没有任何解决方案为我工作。或者呃，我没有把他们做对，无论哪一个。

无论如何。我需要将文本包装在左下角的div周围的容器中。因为它不包裹我不能保证BL顶部/顶部，我不能绝对定位它。

我需要它看起来像这样：

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

我在使用BB代码网站编码这一点，所以我一点点有限的我能做些什么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

删除height采取的内容所需的高度和删除padding-top留内容的div并添加display:inline-block采取的div需要的高度。

如果我的东西在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>