在调整窗口大小后,右浮动元素显示在Chrome中搞砸了?

时间:2013-10-24 00:21:59

标签: html css google-chrome

我的网站页脚中有一个元素浮动到右边,效果很好,除了在Chrome中,当我调整窗口大小时,我有一些样式可以将显示设置为阻塞而没有浮动(查看示例here),但问题是,当我将窗口调整为大尺寸时,即使应用了float:right,元素也会显示在页脚中的其他元素下方。奇怪的是......取消勾选浮动:右侧样式并在检查器中再次检查它将元素返回到其正常位置。有谁知道这可能导致什么?

2 个答案:

答案 0 :(得分:0)

你的推特链接可能会导致一些奇怪的事情,如果你不介意你在其余部分上面托管文本,你可以将它移动到标签中的第一个元素,这将解决你的重新调整问题。 / p>

或者因为看起来你正在使用twitter bootstraps网格,你可以使用他们的类,如:

<footer class="container" role="footer" style="display: block;">
    <span id="copyright" class="col-xs-12 col-sm-4 text-left">©2013 Anton Pugachevsky</span>
    <span id="social" class="col-xs-12 col-sm-4 text-center">
        <a href="http://twitter.com/antonpug">
            <img src="http://antonpug.com/wp-content/uploads/twitter-social-icon.png" />
        </a>
    </span>
    <span id="random-blurb" class="col-xs-12 col-sm-4 text-left">Hosted with ♥ in California</span>
</footer>

答案 1 :(得分:0)

在父元素上使用 text-align:right; ,并在需要的子元素上仅使用 float:left; 或使用其他类型的对齐方式。

这是一种解决方法,但不是解决方案。这个问题似乎是某种chrome样式刷新bug,因为重新浮动样式或刷新页面解决了这个问题。