Limiter la largeur d'un bloc html à celui d'un frère

Je travaille sur mon portfolio, et j'essaie d'ajouter du texte bio. Je veux que tout soit aligné avec mon nom. J'ai réussi à faire un slogan court, mais quand j'ajoute un bloc avec beaucoup de texte, tout s'aligne sur ce bloc, ou sur le parent.Limiter la largeur d'un bloc html à celui d'un frère

Comment puis-je limiter la largeur du parent (à celui du titre

Je l'ai mis en place un Codepen pour démontrer ce que je veux dire.

Je voudrais de préférence de le faire sans JS

Snippet (ne semble pas grande dans la petite fenêtre):

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>

Source

2017-10-06 Adam M Thompson

Vous avez déjà une largeur max définie sur le récipient. Pourquoi ne pas simplement réduire sa valeur à la largeur de l'élément avec votre nom? – jfeferman

C'est une option, mais la largeur exacte en pixels du nom prend des changements sur le navigateur. Mesurer la taille du nom me semble un peu hacky. J'espère une solution plus élégante s'il y en a une. La taille de police du nom change également avec le redimensionnement. Je devrais réinitialiser la largeur maximale à chaque point d'arrêt. –

Essayez d'utiliser 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>

Source

2017-10-06 22:39:15

C'est tout! Je vous remercie. Des changements majeurs sont: 'tête {display: flex}' ' .header-contenu {flex: 0}' ' .myname {white-space: nowrap}' Quelle est la fonction de la '.header -space' bloque? Cela semble fonctionner sans eux. –

Mmm, peut-être avez-vous raison, il n'est pas nécessaire d'utiliser les blocs '.header-space'. Ils devaient occuper tout l'espace libre avant et après votre colonne principale. –

Ils peuvent être nécessaires si '.header-content' n'a pas de left/right' margin: auto' –

Limiter la largeur d'un bloc html à celui d'un frère

Répondre

Questions connexes