Begrenzung der Breite eines HTML-Blocks auf die eines Geschwister

Ich arbeite an meinem Portfolio, und ich versuche, etwas Bio-Text hinzuzufügen. Ich möchte, dass alles mit meinem Namen übereinstimmt. Es ist mir gelungen, eine kurze Slogan-Zeile zu erstellen, aber wenn ich einen Block mit viel Text hinzufüge, wird alles auf diesen Block oder auf das Elternelement ausgerichtet.Begrenzung der Breite eines HTML-Blocks auf die eines Geschwister

Wie kann ich einschränken, die Breite des Mutterunternehmens (zu der der Überschrift

Ich habe ein Codepen zusammen zu zeigen, was ich meine.

Ich würde vorzugsweise wie es zu tun, ohne JS

Snippet (sieht nicht groß in dem kleinen Fenster):

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>

Quelle

2017-10-06 Adam M Thompson

Sie haben bereits max-width auf dem Behälter definiert. Warum nicht einfach seinen Wert auf die Breite des Elements mit Ihrem Namen reduzieren? – jfeferman

Das ist eine Option, aber die genaue Breite in Pixeln, die der Name aufnimmt, ändert sich im Browser. Die Größe des Namens zu messen, scheint mir ein bisschen hacky zu sein. Ich hoffe auf eine elegantere Lösung, wenn es eine gibt. Auch die Schriftgröße des Namens ändert sich mit der Größenänderung. Ich müsste die maximale Breite an jedem Haltepunkt zurücksetzen. –

Try flex zu verwenden:

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>

Quelle

2017-10-06 22:39:15

Das ist es! Vielen Dank. Wesentliche Änderungen sind: 'header {display: flex}' ' .header-contents {flex: 0}' ' .myname {white-space: nowrap}' Was ist die Funktion des '.header -Räume? Es scheint ohne sie zu funktionieren. –

Mmm, vielleicht hast du recht, es ist nicht nötig, '.header-space' Blöcke zu benutzen. Sie sollten den gesamten freien Speicherplatz vor und nach Ihrer Hauptspalte belegen. –

Sie können benötigt werden, wenn '.header-content' keinen linken/rechten' margin: auto' hat –

Begrenzung der Breite eines HTML-Blocks auf die eines Geschwister

Antwort

Verwandte Themen