社交分享按钮定位答案

【问题标题】：social sharing button positioning社交分享按钮定位
【发布时间】：2012-01-29 10:07:12
【问题描述】：

我在定位一些 div 时遇到问题，这些社交分享按钮似乎有问题

我有一些很棒的颜色只是为了显示正在发生的事情...... 我的主要黄色盒子工作正常我把里面的 2 都设置为 50% 并向左浮动，但他们没有...... 每个单独的按钮也在自己的 div 中尝试使它们工作，但我不知道还能做什么尝试了几种不同的定位选项，但这从来都不是我使用 css 的强项

有什么帮助/想法吗？

谢谢

【问题讨论】：

【解决方案1】：

您的#social 具有width: 50%，这意味着它将始终呈现为容器大小的50%，即#subheader。这完全符合您的 CSS 的预期。

如果你这样改变：

<div id="social">
  <div id="social-inner">
    <div id="social-fb">
    ...
  </div>
</div>

然后创建#social { width: 100% } 和#social-inner { width: 50% }，它会完全按照您的意图工作。

【讨论】：

#subheader 包含 #other 和 #social，均为 50%，均浮动，均错误地相互重叠，#social 错误地没有 #other 宽
@Colby 是的。第 33 行。#other, #social 均设置为 width: 50%。
谢谢，好吧，我将它更新为我希望它看起来像下面的样子，我认为你不太明白我的目的，它不是我所期望的，但仍然是#social和 #other 应该是那样，但由于某种原因，它不能让两者正确浮动在一起。 #subheader 应该像另一个一样完整地跨越，并且社交分成两半，就像底部一样，社交链接在右侧。很抱歉造成混乱
还添加了第三个选项，留下 3 个社交框，fb、twtr、g... 似乎即使没有按钮，它们也会使系统混乱