Question

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

CODE：

<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

＆＃13;

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

＆＃13;

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

3 个答案: