Question

所以，我刚刚开始学习HTML / CSS，而且我一直试图弄清楚如何“坚持”。 h2标签下的一行。我的意思是在HTML中有一个名为Instructions的h2标签，后跟一个div标签，其中包含3个构成线段的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

您可以随时使用CSS3 Flexbox。您必须拥有与您已经在同一容器中的div和h2的div。然后。

#instructions_box{
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
    -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
}

Answer 2

我认为，你看到的包装是由于你使用的固定宽度。将您的线宽更改为百分比，它不会在任何尺寸的屏幕上换行。请注意，您需要在其他位置添加视觉间距，例如在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>

线段不会留在h2标签下

2 个答案: