HTML5+CSS如何让子DIV居右并不脱离全局div控制,具体情况如下

我现在设置的是:全局DIV只设置500宽度,这样更小的子DIV可以在全局DIV里面存在,并随全局DIV动,如果页面缩小到全局DIV宽度以下,就不随动了,子DIV的内容就被... 我现在设置的是:全局DIV只设置500宽度,这样更小的子DIV可以在全局DIV里面存在,并随全局DIV动,如果页面缩小到全局DIV宽度以下,就不随动了,子DIV的内容就被浏览器边框遮过去了。现在的具体要求是子DIV要在整个浏览器居右并随右边框动,并且不能脱离全局控制,也就是说缩小到全局DIV时,子DIV又不随着浏览器边框动了 展开
 我来答
cxq6464
推荐于2016-09-09 · 超过42用户采纳过TA的回答
知道小有建树答主
回答量:133
采纳率:0%
帮助的人:93.8万
展开全部
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="css/reset.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
.box {
position: relative;
width: 500px;
height: 300px;
margin: 100px 0 0 300px;
border: 1px solid #9a9a9a;
}
.scol {
position: fixed;
right: 0;
top: 100px;
width: 100px;
height: 100px;
background: #faa;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="scol">

</div>
</div>

</div>
<script type="text/javascript">
$(window).resize(function() {
// console.log($(window).width());

if ($(window).width() <= 800) {
$('.scol').css({
'position': 'absolute'
})
};

})

</script>
</body>
</html>

 其实就是判断浏览器窗口的宽度是不是已经缩小到大div,如何已经缩小到大div了就把小div的定位从相对于浏览器窗口来定位换成绝对定位来弄。如果还不懂可以加我QQ:646488796

本回答被提问者采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
南极潇湘水
2015-07-15 · 本人专业生产bug一百年
南极潇湘水
采纳数:515 获赞数:999

向TA提问 私信TA
展开全部

总觉得怪怪的,是我理解有误么

    <style type="text/css">
        .t{min-width:500px;height:600px;border:1px solid red;}
        .t .t2{float:right;border:1px solid green;margin:5px;width:120px;height:500px;}
    </style>
    <div class="t">
        <div class="t2"></div>
    </div>
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式