破译网站布局答案

【问题标题】：Deciphering Websites Layout破译网站布局
【发布时间】：2017-02-07 23:33:04
【问题描述】：

作为我教育的一部分，我正在阅读以下网站的代码，并试图弄清楚它们是如何组合在一起的。

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

我的问题；在网站标题中，有一个“关注我们”社交媒体部分。如果您将这个元素作为一个整体进行检查，它位于一个带有“social contextual-region”类的<div> 标签内。

是什么让<div> 元素水平位于页面中心？

元素显示为 inline-block，并且没有填充、边框或边距。因此，我认为应该简单地坐在“成为 WWF 成员”部分旁边，两者之间不应该有可见的空间。

HTML/CSS 的哪一部分创建了两个元素之间的间距并导致社交媒体部分水平集中？

【问题讨论】：

通常社交媒体标签由 javascript 或 jquery 管理。因此，很可能会运行一个脚本来在运行时填充该 div 的内容。那有意义吗？它可能与您的站点代码无关。

标签： html css

【解决方案1】：

这一行使“跟随我们”元素位于中心：

text-align: justify;

它在名为 header_top_bar 的 div 内的名为 content 的 div 中，如下图所示：

如果删除它，则元素如下所示：

【讨论】：

【解决方案2】：

对齐是使用一种技术进行的，该技术暗示了 text-align:justify、display: inline-block 和 生成的内容 的组合以使元素具有相同的水平分布。

生成内容的目的是强制换行，否则元素保持左（或右或中心）对齐。

所以，代码的重要部分是：

.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%;
}

在 this link，您可以找到有关此技术的说明。

我还做了一个简化版的代码

.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>

【讨论】：

谢谢。这是一个很好的答案。具体来说，“生成的内容”很重要，因为元素仅形成一行。这是一个简洁的解释：blog.vjeux.com/2011/css/css-one-line-justify.html
是的，生成的内容是最重要的部分，最有趣的是，您不仅可以将这种技术用于文本，还可以用于布局（如我发布的链接中所示）。跨度>
我只是想添加以下内容，因为理解很重要。 ::after selector 在元素的“内容”之后添加额外的内容（即仍在元素内），而不是在元素本身之后。

【解决方案3】：

您询问的 div 的父级具有 css 属性 text-align: justify

【讨论】：