在左下角的div周围换行？

Question

我知道这个问题之前已经回答过了。但是，没有一个解决方案对我有用。 或者，呃，我做的不对，不管哪一个。

无论如何。我需要将文本包装在左下角的 div 周围的容器中。我无法将 BL div 置于顶部/顶部，因为它不换行，而且我无法绝对定位它。

我需要它看起来像这样：

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

我在一个使用 BBCode 的网站上进行编码，所以我在 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

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