我找不到解决问题的方法。
我正在页面的页脚处工作。在一行中从左到右依次是免责声明 div,然后是包含 FaceBook 和 Twitter 按钮的父 div。
(蓝色 ~ 免责声明 div,粉红色 ~ 父 div,红色 ~ 推特按钮的颜色;Facebook 按钮没有单独的颜色)。
目标是让 Twitter 按钮始终位于 FaceBook 按钮的右侧。
免责声明 div 设置为最小尺寸(该页面使用 Twitter Bootstrap),因此当它调整到足够小时,按钮的父 div 将移动到免责声明 div 下面的下一行。
我遇到的问题是,当这个按钮父 div 向下移动时,Twitter 按钮会从父 div 中弹出,并在一列中位于 FaceBook 按钮下方。
页脚本身的代码:
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div>
<div class="row">
<div class="span3 social-media-footer">
<div id='face' class="span1">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="/f.svg" alt="...." />
</a>
</div>
<!-- Twitter Button -->
<div id='twitt' class="span1">
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="/t.svg" alt="...." />
</a>
</div>
</div>
</div>
</div>
</div>
除了任意颜色之外,按钮或其父 div 没有特定的 CSS 规则。
我真的不知道这个,我能找到的唯一看似可行的解决方案涉及使用绝对或固定按钮定位,这两种方法都没有按照我的意愿将它们保留在页脚的父级中。
我希望帮助实现的主要目标只是让 Twitter 按钮在调整大小时保留在父 div 中。
有任何想法吗?并提前致谢!
最佳答案
看看这是否适合您: http://jsfiddle.net/panchroma/yX4ZV/
我对您的 HTML 进行了一些编辑,使 Twitter 和 Facebook 图标位于同一范围内,而不是嵌套网格中的单独范围内。这样做可以解决台式机和智能手机窗口大小的问题,但不能解决平板电脑的问题。
为了解决平板电脑的问题,我将两个图标包装在一个类中,并强制其具有最小宽度:
HTML
<div class="container">
<div id="footer" class="row">
<div class="span9 footer-leftspan">
<xsl:copy-of select="data/footer-content/entry/content" />
</div> <!-- close span9 -->
<div class="span3 social-media-footer">
<div class="social-wrapper">
<!-- FaceBook Button -->
<a class="button-link" href="http://www.facebook.com/pages/...." target="_blank">
<img id="fb-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/facebook.jpg" alt="...." />
</a>
<!-- Twitter Button -->
<a class="button-link" href="https://twitter.com/...." target="_blank">
<img id="twitt-btn" class="social-img" src="https://dl.dropbox.com/u/2665617/bootstrap/images/twitter.jpg" alt="...." />
</a>
</div><!-- close social-wrapper -->
</div> <!-- close span3 -->
</div> <!-- close row -->
</div><!-- close container -->
CSS
.social-wrapper{
min-width:185px !important; /* adjust as necessary depending on icon sizes */
}
祝你好运!
关于css - 维护子div定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14806177/