如何将我的 div 放置在某些文本旁边？答案

【问题标题】：How can I position my div next to the some text?如何将我的 div 放置在某些文本旁边？
【发布时间】：2018-07-18 03:43:21
【问题描述】：

使用 Bootstrap3，我试图将我的 div 放在一些文本旁边。

代码：

<h1>Text</h1>
<div style="position: relative; display: inline-block">
  <div style="width: 40px; position: absolute">
    <div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
    </div>
  </div>
  <div style="width: 30px; position: absolute">
    <div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
    </div>
  </div>
</div>

codepen： https://codepen.io/anon/pen/ddORed

我只想像使用 span 图标一样使用这个 div。

此外，我想知道如何让我的 div 的高度响应文本或文本排版的高度。

怎么做？

【问题讨论】：

你不能在 p 标签中使用 h 标签
对此可能有不同的解决方案。但与答案完全无关。为什么不将 div 更改为图像并将其用作伪图像？ h1：在 {} 之前？

标签： html twitter-bootstrap css

【解决方案1】：

只需将 DIV - 但最好作为 SPAN - （您已经正确定义为 inline-block）放入 h1 标签（顺便说一句：p 内没有 h1！）并添加 vertical-align:top; ，所以它与文本行的上边框对齐：

<h1>Text
  <span style="position: relative; display: inline-block;vertical-align:top;">
    <div style="width: 40px; position: absolute">
      <div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
      </div>
    </div>
    <div style="width: 30px; position: absolute">
      <div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
      </div>
    </div>
  </span>
</h1>

https://codepen.io/anon/pen/yvVogM

【讨论】：

在此上下文中不允许元素 div 作为元素 h1 的子元素。

【解决方案2】：

不完全确定你想要做什么，你可以通过使用线性渐变作为背景来做到这一点，并且不需要使用所有这些标记：

h1 {
  display: inline-block;
  padding-right: 50px;
  background: 
  linear-gradient(to right, #f8ff15, #f8ff15) calc(100% - 10px) 0/ 30px calc(100% - 10px) no-repeat, 
  linear-gradient(to right, darkblue, darkblue) 100% 0/ 40px 100% no-repeat;
}

<h1>Text</h1>
<br>
<h1>another<br> text</h1>

【讨论】：

【解决方案3】：

您可以在发短信之前移动您的 div 并将位置设置为绝对位置。

https://codepen.io/anon/pen/MQboRj

<div style="position: absolute; display: inline-block">
  <div style="width: 40px; position: absolute">
    <div style="padding-top: 100%;overflow: hidden; background-color: darkblue;">
    </div>
  </div>
  <div style="width: 30px; position: absolute">
    <div style="padding-top: 100%; overflow: hidden; background-color: #f8ff15;">
    </div>
  </div>
</div><h1 style="padding-left:50px;">Here is what I want to position my blue and yellow square. And also I hope my square's height be equal to Text's height</h1></div>

【讨论】：