在左下角环绕文字 div？

Question

我发现这个问题之前已经有人回答过。但是，none 的解决方案对我有用。 或者呃，我做的不对，以哪个为准。

无论如何。我需要将文本包装在左下角 div 周围的容器中。我不能 margin-top/top BL div 因为它不换行，我不能绝对定位它。

我需要它看起来像这样：

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

我在一个使用 BBCode 的网站上编写代码，所以我能做的 HTML 有点受限，而且我不能使用 javascript/jquery.

Fiddle 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 中遗漏了什么，请查看 fiddle 代码

Working fiddle

更新 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>

在左下角环绕文字 div？

Wrap text around bottom left div?

html

css

bbcode