Question

我设法使我的“ div”（这确实是一种形式），以便顶部的文本穿过顶部边框。但是，我想知道是否还有一种方法可以使文本也通过底部边框？

这是我到目前为止所拥有的：

fieldset {
  margin: 0 auto;
  width: 400px;
  border-color: rgba(70, 124, 63, .5);
  padding: -11px;
}

legend {
  font-family: "Garamond";
  font-size: 13px;
  font-style: italic;
  text-align: center;
  color: #285125;
}

.info {
  font-color: #86A798;
  text-align: center;
  font-family: "Garamond";
  font-size: 10px;
  font-style: italic;
}

.maintext {
  font-family: "Gill Sans";
  font-color: #656757;
  text-align: justify;
}

<form>
  <fieldset>
    <legend>HMM</legend>
    <img src="https://i.imgur.com/65CeLdF.gif" align="right" style="padding: 8px;">
    <div class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare est sed libero pretium commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam commodo mollis turpis, fringilla vulputate
      erat elementum at. Maecenas ligula arcu, dignissim quis euismod at, molestie a magna. Donec semper commodo mi, sit amet gravida augue venenatis nec. Suspendisse eu sodales orci. Fusce ultricies ante ac luctus cursus. Interdum et malesuada fames
      ac ante ipsum primis in faucibus. Nullam nisl ligula, maximus vitae tincidunt et, interdum quis lectus. Donec rutrum ante ac dapibus pellentesque. Phasellus non congue ex. Integer luctus nunc.</div>
    <div class="info">### - @.user</div>
  </fieldset>
</form>

有什么建议吗？我希望 .info 位于底部边框。我对这种事情有点陌生，如果答案很明显，对不起。我环顾四周无济于事。

Answer 1

fieldset {
  margin: 0 auto;
  width: 400px;
  border-color: rgba(70, 124, 63, .5);
  padding: -11px;
}

legend {
  font-family: "Garamond";
  font-size: 13px;
  font-style: italic;
  text-align: center;
  color: #285125;
}

.info {
  font-color: #86A798;
  text-align: center;
  font-family: "Garamond";
  font-size: 10px;
  font-style: italic;
  position: relative;
  bottom: -18px;
  z-index: 10;
}

.maintext {
  font-family: "Gill Sans";
  font-color: #656757;
  text-align: justify;
}

<form>
  <fieldset>
    <legend>HMM</legend>
    <img src="https://i.imgur.com/65CeLdF.gif" align="right" style="padding: 8px;">
    <div class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare est sed libero pretium commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam commodo mollis turpis, fringilla vulputate
      erat elementum at. Maecenas ligula arcu, dignissim quis euismod at, molestie a magna. Donec semper commodo mi, sit amet gravida augue venenatis nec. Suspendisse eu sodales orci. Fusce ultricies ante ac luctus cursus. Interdum et malesuada fames
      ac ante ipsum primis in faucibus. Nullam nisl ligula, maximus vitae tincidunt et, interdum quis lectus. Donec rutrum ante ac dapibus pellentesque. Phasellus non congue ex. Integer luctus nunc.</div>
    <div class="info">### - @.user</div>
  </fieldset>
</form>

注意我添加到“ info”类的内容：

position: relative;
bottom: -18px;
z-index: 10;

Answer 2

注意： SELECT id, add1 FROM old_data LEFT JOIN new_data ON (new_data.add1 = old_data.add1 and new_data.rcid = old_data.rcid) WHERE new_data.add1 IS NULL;应该是font-color。

一种选择是在color元素上使用绝对定位来设置背景色，并在.info上使用相对定位来包含绝对定位的fieldset元素。

.info

fieldset {
  position: relative;
  margin: 0 auto;
  width: 400px;
  border-color: rgba(70, 124, 63, .5);
  padding: -11px;
}

legend {
  font-family: "Garamond";
  font-size: 13px;
  font-style: italic;
  text-align: center;
  color: #285125;
}

.info {
  padding: 0 3px;
  background-color: white;
  color: #86A798;
  text-align: center;
  font-family: "Garamond";
  font-size: 10px;
  font-style: italic;
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX( -50% );
}

.maintext {
  font-family: "Gill Sans";
  color: #656757;
  text-align: justify;
}

另一种选择是将文本<form> <fieldset> <legend>HMM</legend> <img src="https://i.imgur.com/65CeLdF.gif" align="right" style="padding: 8px;"> <div class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ornare est sed libero pretium commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam commodo mollis turpis, fringilla vulputate erat elementum at. Maecenas ligula arcu, dignissim quis euismod at, molestie a magna. Donec semper commodo mi, sit amet gravida augue venenatis nec. Suspendisse eu sodales orci. Fusce ultricies ante ac luctus cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam nisl ligula, maximus vitae tincidunt et, interdum quis lectus. Donec rutrum ante ac dapibus pellentesque. Phasellus non congue ex. Integer luctus nunc.</div> <div class="info">### - @.user</div> </fieldset> </form>中的文本.info中包裹起来，这样您就可以将背景颜色仅应用于文本，然后使用相对位置将其向下移动到底部边框上。相对定位的一个缺点是，即使元素在视觉上位于其他位置，它也会占据其起源的空间。

span

fieldset {
  margin: 0 auto;
  width: 400px;
  border-color: rgba(70, 124, 63, .5);
  padding: -11px;
}

legend {
  font-family: "Garamond";
  font-size: 13px;
  font-style: italic;
  text-align: center;
  color: #285125;
}

.info {
  color: #86A798;
  text-align: center;
  font-family: "Garamond";
  font-size: 10px;
  font-style: italic;
  position: relative;
  top: 16px;
}

.info>span {
  padding: 0 3px;
  background-color: white;
}

.maintext {
  font-family: "Gill Sans";
  color: #656757;
  text-align: justify;
}

通过div底部边框输入文字？

2 个答案: