htmlブロックの幅を兄弟の幅に制限する

Question

私は自分のポートフォリオに取り組んでいます。私はいくつかのバイオテキストを追加しようとしています。私はすべてが私の名前と一致するようにします。短いタグラインを作るのに成功しましたが、たくさんのテキストを含むブロックを追加すると、すべてがそのブロックまたは親に揃えられます。私は、好ましくは、JSせずにそれを行うにはしたいと思いますどのように私は私が何を意味するかを証明するために一緒にCodepenを入れている見出し

のものに（親の幅を制限することができます。

スニペット（小さなウィンドウに見栄えしません）：

header { 
 
    display: inline-block; 
 
    width: 100%; 
 
    margin: 16px 0; 
 
    color: #333; 
 
    text-align: center; 
 
} 
 

 
header .header-contents { 
 
    margin: auto; 
 
    max-width: 920px; 
 
} 
 

 
header .header-contents .title { 
 
    display: inline-block; 
 
    font-family: sans-serif; 
 
    font-weight: 400; 
 
    font-size: 96px; 
 
} 
 

 
header .header-contents .tagline { 
 
    display: block; 
 
    text-align: right; 
 
    font-family: sans-serif; 
 
    font-weight: 300; 
 
    font-size: 36px; 
 
} 
 

 
header a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
header a:hover { 
 
    text-decoration: none; 
 
} 
 

 
.bio-text { 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
    line-height: 2em; 
 
    font-weight: 300; 
 
    margin: 16px auto; 
 
}

<header> 
 
    <div class="header-contents"> 
 
    <div class="title"> 
 
     <a href="./">First Lastname</a> 
 
     <div class="tagline"> 
 
     Tagline goes here 
 
     </div> 
 
     <!-- putting .bio-text here moves the tagline to the right margin --> 
 
    </div> 
 
    <div class="bio-text" id="about"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p> 
 
    </div> 
 
    </div> 
 
</header>

Answer 1

はflexを使用してみてください：

HTML：

header { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100%; 
 
    margin: 16px 0; 
 
    color: #333; 
 
    text-align: center; 
 
} 
 

 
header .header-space { 
 
    flex: 1; 
 
} 
 

 
header .header-contents { 
 
    flex: 0; 
 
    margin: auto; 
 
    max-width: 960px; 
 
} 
 

 
header .header-contents .myname { 
 
    white-space: nowrap; 
 
} 
 

 
header .header-contents .title { 
 
    font-family: sans-serif; 
 
    font-weight: 400; 
 
    font-size: 96px; 
 
} 
 

 
header .header-contents .tagline { 
 
    display: block; 
 
    text-align: right; 
 
    font-family: sans-serif; 
 
    font-weight: 300; 
 
    font-size: 36px; 
 
} 
 

 
header a { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
header a:hover { 
 
    text-decoration: none; 
 
} 
 

 
header .bio-text { 
 
    width: inherit; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
    font-size: 18px; 
 
    line-height: 2em; 
 
    font-weight: 300; 
 
    margin: 16px auto; 
 
}

<header> 
 
    <div class="header-space"></div> 
 
    <div class="header-contents"> 
 
    <div class="title"> 
 
     <div class="myname"> 
 
     <a href="./">First Lastname</a> 
 
     </div> 
 
     <div class="tagline">Tagline goes here</div> 
 
     <div class="bio-text" id="about"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="header-space"></div> 
 
</header>