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，我还附上了以下代码。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

只需将float: left;position: relative;添加到元素中，然后添加一个spacer元素，如下面的代码所示。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

删除height以获取所需的内容高度，然后移除padding-top以保留div中的内容并添加display:inline-block以获取所需的div高度。

如果我在css或html中遗漏了某些内容，请查看小提琴代码

<强> Working fiddle

Udate css part

.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周围换行文字？

2 个答案: