Question

好吧，老实说，我不知道自己做错了什么。所以，让我告诉你：

这就是我想要完成的事情（用PS制作）：

到目前为止我的结果是什么：

http://puu.sh/ryXST/02c9722a53.png（显然不成功，作为附注，橙色框只是一个占位符，我稍后会填写表格。）

我遇到的问题是：首先尝试将“社交内容”的宽度设置为所保存内容的宽度和高度。当然，“主要社交”只是屏幕的宽度和内容的高度。如果我能用“社交内容”完成宽度的事情，那么我将能够以“边距：0自动”为中心，但唉，我无法弄清楚我的困境。这是我的相关标记（“关注我们”栏被排除在外，因为它无关紧要）：

.fa-facebook {
  color: white;
  overflow: hidden;
}
.fa-twitter {
  color: white;
  padding: 0.2em;
}
#main-social {
  height: 8em;
}
#social-content {
  height: 100%;
  width: 70%;
  margin: 0 auto;
  margin-top: 1.4em;
}
#facebook {
  float: left;
  display: inline-block;
}
#facebook a {
  padding: 0.2em 0.4em 0.2em 0.4em;
  background-color: #3b5998;
  height: 100%;
  text-decoration: none;
}
#facebook a:hover {
    color: white;
}
#twitter {
  float: left;
  display: inline-block;
}
#twitter a {
  background-color: #10bbe6;
  text-decoration: none;
}
#twitter a:hover {
    color: white;
}
#emailForm {
  float:left;
  display: inline-block;
  width: 25em;
  margin: 0 auto;
  background-color: orange;
  height: 7em;
}

<script src="https://use.fontawesome.com/d7993286b8.js"></script>
<div id="main-social">
  <div id="social-content">
    <div id="facebook">
      <a href="facebook.com" class="fa fa-facebook fa-5x"></a>
    </div>

    <div id="emailForm">

    </div>

    <div id="twitter">
      <a href="twitter.com" class="fa fa-twitter fa-5x" ></a>
    </div>
  </div>
</div>

此外，问题还在于，它需要响应，整个网站都是响应式的，而且由于我还不熟悉响应式场景，我可能没有采用最佳方法。（提示不需要，但非常感谢:)）

Answer 1

要将#social-content的宽度设为其内容的宽度，请在未定义display: inline-block的情况下使用width。

如果#main-social只是一个容器，您可以使用flexbo将#social-content置于其中。将以下内容添加到#main-social：

#main-social {
    display: flex;
    justify-content: center; // Centers horizontally
    align-items: center;     // If you need to center vertically, as well
}

将Div划分为Div（以及根据内容大小调整div的大小）？

1 个答案: