如何将div放在某些文本旁边？

Question

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

我只是想像跨度图标一样使用这个div。

所以，我想知道如何使我的div的高度响应文本或文本形态的高度。

怎么做？

Answer 1

只是把那个DIV - 但更好的作为一个SPAN - （你已经正确定义为inline-block）INTO h1标签（BTW：h1里面没有p！）并添加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

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

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