線段不會留在h2標記下

因此，我剛剛開始學習HTML/CSS，並且一直試圖弄清楚如何在h2標記下「粘貼」一行。我的意思是在HTML中有一個叫做Instructions的h2標籤，後面跟着一個div標籤，其中包含3個構成線段的其他div。默認情況下，這條線位於左側（自然地），但我想要做的就是讓線條卡在h2標籤下，這樣當瀏覽器擴展或收縮時，線條直接停留在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/

感謝

來源

2016-08-10 B Markson

由於您使用的固定寬度，您看到的包裝是我認爲的。將您的線條寬度更改爲百分比，並且不會在任何尺寸的屏幕上進行換行。請注意，您需要在其他地方添加視覺間距，例如在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>

來源

2016-08-10 20:18:43 DACrosby

酷：d我看到你的point.I做了一個小實驗，你是對的，它是固定的寬度。我接受這一點，因爲它是我給出的最接近的解決方案。 Flexbox很酷，但我將不得不對它做一些研究，以瞭解所有這一切。我會這樣做，但在另一個時間。對不起Korte :(（（ –

您可以隨時使用CSS3 Flexbox的。你必須將線條和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; 
}

來源

2016-08-10 20:15:30 Korte

線段不會留在h2標記下

回答

相關問題