將html塊的寬度限制爲兄弟的寬度

我正在處理我的投資組合，並且正在嘗試添加一些生物文本。我希望一切都與我的名字一致。我已經成功地製作了一個簡短的標語，但是當我添加一個包含大量文本的區塊時，所有內容都與該區塊或父區塊對齊。將html塊的寬度限制爲兄弟的寬度

我怎樣才能限制父（寬度到

我已經把一個Codepen來證明我的意思的標題中。

我最好喜歡做沒有JS

片段（不小窗口看起來棒極了）：

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>

來源

2017-10-06 Adam M Thompson

您已經在容器上定義的最大寬度。爲什麼不簡單地用你的名字把它的值減小到元素的寬度？ – jfeferman

這是一個選項，但名稱在瀏覽器上的確切寬度（以像素爲單位）會發生更改。衡量這個名字的大小對我來說似乎有點難以理解。我希望有一個更優雅的解決方案。此外，名稱的字體大小隨調整大小而改變。我需要在每個斷點處重置最大寬度。 –

嘗試使用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>

來源

2017-10-06 22:39:15

就是這樣！謝謝。主要的變化是： '頭{顯示：柔性}'' .header-內容{撓曲：0}'' {.myname空白：NOWRAP}' 什麼是'.header的功能「空格」塊？這似乎沒有他們的工作。 –

嗯，也許你是對的，沒有必要使用'.header-space'塊。他們應該佔用主列前後的所有自由空間。 –

如果'.header-content'沒有左/右'margin：auto'就可能需要它們 –

將html塊的寬度限制爲兄弟的寬度

回答

相關問題