html - 线段不会留在 h2 标签下

Question

所以，我刚刚开始学习 HTML/CSS，并且一直在尝试弄清楚如何在 h2 标签下“粘贴”一行。我的意思是，在 HTML 中有一个名为 Instructions 的 h2 标签，后面跟着一个包含 3 个其他 div 的 div 标签，它们构成了一个线段。默认情况下，该行位于左侧(自然)，但我想做的是将该行卡在 h2 标签下，这样当浏览器扩展或缩小时，该行直接停留在 h2 标签下，而不是在屏幕上移动自己。

我发现了这个网站:http://www.barelyfitz.com/screencast/html-training/css/positioning/我用它来尝试看看绝对/相对定位是否有帮助。我想我做错了，因为它似乎没有帮助。

我在下面提供了 HTML/CSS 和一个 jsfiddle(jsfiddle 没有显示当浏览器扩展/缩小时线条如何移动，不过我希望你明白我的意思)。如果你能帮助指导我或给我一些资源来理解我需要做的更好，那就太好了 :D

我敢肯定这是微不足道的，但我正在努力学习它。我发现了很多不同的方法(我认为)，但它们看起来有点复杂。

HTML

<div id="instructions_box">
  <h2>Instructions</h2>
  <div class="line_divider">
    <div class="blue_line"></div>
    <div class="yellow_line"></div>
    <div class="blue_line"></div>
   </div>  
</div>

CSS

#instructions_box{
   display: inline-block;
   //position: relative;
}

.line_divider{
   background-color: aqua;
   //position: absolute;
   //bottom: 0;
   //right: 2rem;
}

.blue_line{
   height: 2px;
   width: 50px;
   background-color: rgb(0,0,139);
   float: left;  
}

.yellow_line{
   height: 2px;
   width: 90px;
   background-color: yellow;
   float: left;  
}

#instructions_box h2{
   text-align: center;
}

https://jsfiddle.net/10szzwvs/1/

谢谢

Answer 1

我认为，您看到的环绕是由于您使用的固定宽度所致。将您的线宽更改为百分比，它不会在任何尺寸的屏幕上换行。请注意，您需要在其他地方添加视觉间距，例如在 h2 本身上。

#instructions_box{
   display: inline-block;
}
#instructions_box h2{
   text-align: center;
   padding: 0 25px 0;    /* visual spacing */
   margin: 0;
}

.line_divider{
   background-color: aqua;
}

.blue_line{
   height: 2px;
   width: 30%;    /* dynamic width here */
   background-color: rgb(0,0,139);
   float: left;  
}

.yellow_line{
   height: 2px;
   width: 40%;    /* dynamic width here */
   background-color: yellow;
   float: left;  
}

<div id="instructions_box">
  <h2>Instructions</h2>
  <div class="line_divider">
    <div class="blue_line"></div>
    <div class="yellow_line"></div>
    <div class="blue_line"></div>
  </div>
</div>