html – CSS在div内部定位固定限制

html – CSS在div内部定位固定限制,第1张

概述我有一个小工具栏div位置:固定,因此它会随着用户滚动而移动.工具栏在一个更大的div内,但是我需要工具栏不滚出父div – 有什么办法可以做到这一点吗? 如果您不明白我的意思,请查看:http://flowmainserver.appspot.com/post (我希望爱心和其他按钮不会滚出大图像div,因为它们会阻碍评论框) 有没有办法用css实现这个或者我需要javascript吗? 谢谢! 我有一个小工具栏div位置:固定,因此它会随着用户滚动而移动.工具栏在一个更大的div内,但是我需要工具栏不滚出父div – 有什么办法可以做到这一点吗?

如果您不明白我的意思,请查看:http://flowmainserver.appspot.com/post
(我希望爱心和其他按钮不会滚出大图像div,因为它们会阻碍评论框)

有没有办法用CSS实现这个或者我需要JavaScript吗?
谢谢!

解决方法 首先,一些其他指针:

>使用<!DOCTYPE>宣言. (使用不同的<!DOCTYPE>声明可能需要您进行一些更改,包括addnig cellspacing =“0”cellpadding =“0”到< table>标记)
>不要使用< center>元素 – 而是使用margin的组合:auto和text-align:center;.
>不要把块级元素< div>在内联级别元素内< a>像这样:< a href =“/”>< div class =“Title”>< / div>< / a>.相反,请提供您的< a>显示:块; CSS属性.
> …当你使用image for text时还在HTML源代码中包含该文本,但使用CSS text-indent:-10000px;删除它.
>不要混用xhtml语法和HTML语法!您有时会关闭空标记 – < link /> – 有时不< img>.选择一个或另一个,并使用适当的<!DOCTYPE>
>完成所有这些后,您还可以在< img />上输入alt属性. < textarea>上的标签和行和列用于验证HTML文档的标记.

这将导致浏览器之间更加一致的行为和更好的可访问性.折腾一些< h1> …< h6>标题是你在SEO上也很稳固.

切入点

至于你的问题……也许你只是把它放在评论的后面?

把它放在一个.HTML文件中:

<!DOCTYPE HTML PUBliC "-//W3C//DTD xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>        <base href="http://flowmainserver.appspot.com/" /> <!-- remove this when you put it online -->    <!-- copyright Cal Smith 2010 $(window).height()-->    <script src="http://AJAX.GoogleAPIs.com/AJAX/libs/jquery/1.4.2/jquery.min.Js" type="text/JavaScript"></script>    <script src="Js/jquery.scrollTo-min.Js" type="text/JavaScript"></script>    <script type="text/JavaScript">$(window)._scrollable();</script>    <link href="buttons.CSS" media="all" rel="stylesheet" type="text/CSS" />    <link href="main.CSS" media="all" rel="stylesheet" type="text/CSS" ID="main_CSS" />    <Title>flow | post Title</Title>    <script type="text/JavaScript">/*    $(window).scroll(function(){        if($(window).scrolltop() == $(document).height() - $(window).height()){            document.location = "http://www.Google.com";        }    });    */</script>    <style type="text/CSS">        HTML body {            text-align:center;        }        HTML body div.pageHolder {            margin:auto;        }        HTML body a.Title {            text-indent:-10000px;            display:block;        }        HTML body table {            position:relative;            z-index:10;            background:url(imgs/dark_bg.png) repeat;        }        HTML body table table td {            padding-bottom:5px;        }    </style></head><body>    <div  >        <a href="/" >Flow</a>        <div >            <p >Post Title<span >&nbsp;2 weeks ago by @<a href="#" >author url</a></span></p>            <div ></div>            <div  title="Click to heart">&hearts;</div>            <div  onclick="$(window).scrollTo( $('#commentBoxTitle'),380 ); $('#commentBox').focus();" title="Comments">&Xi;&nbsp;</div>            <div  ></div>            <table border="0" cellspacing="0" cellpadding="0">                <tr>                    <td valign="top">                        <span  ID="commentBoxTitle">Comment</span>                        <textarea ID="commentBox" ></textarea>                        <div align="right"><div >Post</div></div>                    </td>                    <td>                        <div >                            <table border="0" cellspacing="0" cellpadding="0">                                <tr>                                    <td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/10587/xl.png?1280926926"  /></td>                                    <td><div >Vivamus ID mollis quam. Morbi ac commodo nulla. In condimentum orci ID nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum,arcu soDales feugiat consectetur,nisl orci bibendum elit,eu euismod magna sAPIen ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar,odio sed rhoncus suscipit,sem diam ultrices mauris,eu consequat purus metus eu velit. Proin metus odio,aliquam eget molestIE nec,gravida ut sAPIen.</div></td>                                </tr>                                <tr>                                <td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/7825/xl.png?1278955396"  /></td>                                    <td><div >Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus.</div></td>                                </tr>                                <tr>                                    <td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/10587/xl.png?1280926926"  /></td>                                    <td><div >Vivamus ID mollis quam. Morbi ac commodo nulla. In condimentum orci ID nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum,gravida ut sAPIen.</div></td>                                </tr>                                <tr>                                    <td valign="top"><img src="http://s3.amazonaws.com/forrst-production/users/photos/7825/xl.png?1278955396"  /></td>                                    <td><div >Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus.</div></td>                                </tr>                            </table>                        </div>                    </td>                </tr>            </table>            <div >created by cal smith</div>        </div>    </div></body></HTML>
总结

以上是内存溢出为你收集整理的html – CSS在div内部定位固定限制全部内容,希望文章能够帮你解决html – CSS在div内部定位固定限制所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1087444.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存