将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块的宽度限制为兄弟的宽度

回答

相关问题