ウェブサイトのレイアウトを解読する

私の教育の一環として、私は次のウェブサイトにコードを読んでいて、それがどのように一緒に収まるかを調べようとしています。ウェブサイトのレイアウトを解読する

https://www.wwf.org.uk/

私の質問。サイトのヘッダーには、「私たちに従う」ソーシャルメディアのセクションがあります。この要素を全体として調べると、クラス「social contextual-region」の<div>タグの内部に位置します。

<div>要素をページの中央に水平に配置するにはどうすればよいですか？

要素は、インラインブロックとして表示され、パディング、境界線または余白がありません。したがって、「WWFメンバーになる」セクションの隣に単に座って、両者の間に目に見えるスペースはないはずです。

HTML/CSSのどの部分が2つの要素の間隔を作成し、ソーシャルメディアセクションを水平に集中させていますか？

2017-02-07 case_2501

一般的にソーシャルメディアのタグがjavascriptやjqueryので管理されているコードの簡易版でフィドルを作りました。したがって、実行時にそのdivの内容を満たすスクリプトが実行されている可能性があります。それは理にかなっていますか？あなたのサイトコードとは何の関係もないかもしれません。 –

アライメントがtext-align:justifyの組み合わせを意味技法で作られたCSSプロパティ、display: inline-blockと生成されたコンテンツを持っています水平に分配する。

生成されたコンテンツの目的は改行を強制することです。それ以外の場合、要素は左または右揃えのままです。

ので、コードの重要な部分は、以下のとおりです。this linkで

.header_top_bar .content { 
    text-align: justify; 
    ... 
} 

.header_top_bar .title, .header_top_bar .social, .header_top_bar .newsletter, .header_top_bar .search { 
    display: inline-block; 
    ... 
}

と

.header_top_bar .content::after { 
    content: ''; 
    display: inline-block; 
    vertical-align: top; 
    width: 99%; 
}

あなたがこのテクニックの説明を見つけることができます。

は、私はまた、

.wrapper{ 
 
    text-align: justify; 
 
    padding: 10px; 
 
    background: #333; 
 
} 
 
.wrapper::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 99%; 
 
} 
 
.justified-element { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin: 0; 
 
    font-size: 16px; 
 
    color: #fff; 
 
}

<div class="wrapper"> 
 
    <p class="justified-element">One</p> 
 
    <span class="justified-element">Two</span> 
 
    <div class="justified-element">Three</div> 
 
    <p class="justified-element">Four</p> 
 
</div>

出典

2017-02-07 14:04:09 Elisa

ありがとうございます。これは素晴らしい答えです。具体的には、要素が1つの行を形成するだけであるため、「生成されたコンテンツ」は重要です。ここにはきちんとした説明があります：http://blog.vjeux.com/2011/css/css-one-line-justify.html –

はい、生成されたコンテンツは最も重要な部分です。最も興味深いのは、このテクニックは、テキストだけでなくレイアウト（私が投稿したリンクのように）にも使用してください。 – Elisa

理解しておくことが重要なので、私はちょうど次を追加したかった。 ':: after selector 'は、要素自体の後ではなく要素の（つまり要素内にまだ存在する）' content 'の後に追加の内容を追加します。 –