Css 如何让Twitter小部件像其他元素一样工作？
几天来，我一直在试图解决一个问题，我一直与内容，特别是文本，但一般我的内容框，溢出到我的Twitter小部件。小部件似乎被忽略了，就好像它不存在一样，当浏览器变得太小时，文本将与小部件重叠。我怎样才能解决这个问题 我希望Twitter小部件和“Footer”保持在彼此的上方和下方，我最终会将“Footer”移动到小部件下方。随着浏览器变得更小，我希望包含段落和视频的内容框能够靠近小部件和“页脚”，而不会重叠，也不会在其下方形成。只需强制页面滚动即可。作为参考，您可以查看任何twitter提要 我不希望这种情况发生： 请记住，我对这整件事还很陌生。我打算更多地成为一名后端开发人员，但我知道，如果我想在任何职业机会中获得成功，我需要在开发的各个方面全面发展。向所有提供提示、技巧和修复的人表示衷心的感谢！另外，如果这不是正确的格式，很抱歉 下面是目前的一个JSFIDLE标记： 我将确保保留这些文件的备份，以防将来的开发人员处理相同的问题 HTML标记：Css 如何让Twitter小部件像其他元素一样工作？,css,html,Css,Html,几天来，我一直在试图解决一个问题，我一直与内容，特别是文本，但一般我的内容框，溢出到我的Twitter小部件。小部件似乎被忽略了，就好像它不存在一样，当浏览器变得太小时，文本将与小部件重叠。我怎样才能解决这个问题 我希望Twitter小部件和“Footer”保持在彼此的上方和下方，我最终会将“Footer”移动到小部件下方。随着浏览器变得更小，我希望包含段落和视频的内容框能够靠近小部件和“页脚”，而不会重叠，也不会在其下方形成。只需强制页面滚动即可。作为参考，您可以查看任何twitter提要 我
<body>
<div class=wrapper>
<div class=header>
<!-- Insert header image here via CSS-->
</div>
<nav>
<ul>
<li><a href=#>Home</a>
</li>
<li><a href=#>Server Rules</a>
</li>
<li><a href=#>News</a>
</li>
<li><a href=#>Forums</a>
</li>
<li><a href=#>PvP Stats</a>
</li>
<li><a href=#>MCF Thread</a>
</li>
<li><a href=/IRC.php>IRC</a>
</li>
</ul>
</nav>
<div id=content>
<div id=footer>
<div id="sidebar">
<ul>
<li class="footer-item">© 2010-2014 SyroCraft</li>
<li class="footer-item">Jobs</li>
<li class="footer-item">About</li>
<li class="footer-item">Help</li>
<li class="footer-item">Terms</li>
<li class="footer-item">Yada</li>
<li class="footer-item">Yada</li>
<li class="footer-item">Yada</li>
</ul>
</div>
<p class=twitter><a class="twitter-timeline" height="485px" width="310px" href="https://twitter.com/SyroCraft" data-widget-id="335981577555308544">Tweets by @SyroCraft</a>
</div>
<script>
! function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + "://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
}
}(document, "script", "twitter-wjs");
</script>
</p>
<div id=maincontent>
<h3>SyroCraft Minecraft Server</h3>
<p>Here at SyroCraft, we strive to create and expand a dedicated and upstanding community of builders, role-players, pvp-ers and socialize-ers. Our main focus is on community involvement. Whether it be an event or content for our website. We work together to create the best place to play and enjoy Minecraft. Click around a bit and check us out! Watch our server trailer below!</p>
<p id=video>
<object>
<param name="movie" value="//www.youtube.com/v/tNwfnvkDFB0?version=3&hl=en_US"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="//www.youtube.com/v/tNwfnvkDFB0?version=3&hl=en_US" type="application/x-shockwave-flash" height=300 width=500 allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</p>
<!-- insert trailer here! -->
</div>
</div>
</div>
</body>
</html>
尝试将twitter提要标记为位置：绝对；以防止文本重叠 参见小提琴：
希望这能有所帮助。所有这些问题的答案都很简单，Link13回答了问题，但没有回答我的意思 我发现，通过在CSS中向包装器添加最小宽度和最大宽度，它会将页面锁定到一定大小，并强制添加水平滚动条 见代码：
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%
max-height: 1092px;
min-height: 1020px;
}
这完美地解决了我在信息框上下移动内容框以及twitter小部件后面的问题。尝试使用一些客户端框架，如bootstrap：你的站点代码有严重问题。好的，我会调查一下。为了解决我经常遇到的问题，我一直在乱搞代码，这真的不符合我自己的标准，哈哈。是的，引导帮助很大。签出的例子有现成的模板，你可以使用，这些作品在移动太！主要的一点是学习使用网格：好的，这修复了重叠，但是现在当浏览器太小时，小部件将重叠文本。阻止这种情况发生的步骤是否相同或相似？
.wrapper {
margin: 0 auto;
width: 100%;
height: 100%
max-height: 1092px;
min-height: 1020px;
}