線分だからH2タグの下

Question

滞在しないだろう、私はちょうどHTML/CSSを学び、私はどのように「スティック」にH2タグの下のラインを把握しようとしてきた始めました。つまり、HTMLには、命令と呼ばれるh2タグが続き、線分を構成する他の3つのdivを含むdivタグが続きます。デフォルトでは、ラインは（自然に）左側にありますが、私がしたいのは、h2タグの下にラインが張られているため、ブラウザが拡大または縮小されたときに、ラインはh2タグの下に直接移動しますそれだけで。

は、私がこのサイトに出くわした： http://www.barelyfitz.com/screencast/html-training/css/positioning/と私は試してみて、絶対/相対位置がここに役立つかどうかを確認するためにそれを使用していました。私はそれが助けに見えないので、ひどく間違ってやっていると思う。

私はHTML/CSSと以下のjsfiddleを提供しています（jsfiddleは、ブラウザが拡張/縮小されたときの行の動きを示していません）。あなたが私を導くのを手助けするか、私に何か良いことをするために必要なことを理解するための助けをすることができるなら、D

私はこれが自明だと確信していますが、それを学ぶ上で徹底的に努力しています。私が見つけた方法はたくさんありましたが（私は思っています）、彼らはちょっと複雑なようでした。あなたはいつもCSS3フレキシボックスを使用することができます

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>

Answer 2

。あなたは、あなたがすでに行っているのと同じコンテナに行のdivとh2を持っていなければなりません。その後。

#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; 
}