个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
/* #box {position:absolute;top:0;right:0;} */
/* #box {position:absolute;top:0;left:0;} */
/* #box {float:right;} */
#box {float:left;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
</body>
</html>
取消注释第一个 float 左边的 id 和 float 右边的 id，你会看到。我也将我尝试过的解决方案注释掉了。
您应该通过复制和粘贴获得完整的复制品。
最佳答案
我认为不使用 javascript 就没有解决这个问题的方法。浏览器相对于该页面的左上角呈现页面，因此位于该 0,0 点上方或左侧的任何内容实际上都在屏幕外。所有溢出都发生在底部和右侧。这与任何 block 元素内的内容相同。所以如果你有一个相对于页面右侧定位的元素，宽度大于 100% 宽度。 0,0 原点左侧的部分将只是在屏幕外。
不过，我希望有人能证明我是错的。
这是一个有效的 javascript 解决方案:
<html>
<head>
<style type="text/css" rel="stylesheet">
* {margin:0;padding:0;}
div#box {background-color:green;width:1000px;}
#box {position:absolute;top:0;left:0;}
.clearer {clear:both;}
</style>
</head>
<body>
<div id="box">
asdafdsf
</div>
<div class="clearer"></div>
<script type="text/javascript">
function layout() {
if( typeof( window.innerWidth ) == 'number' )
this.screenWidth = window.innerWidth;
else //patch for IE
this.screenWidth = document.body.clientWidth;
this.el = document.getElementById('box')
if (this.el.offsetWidth > this.screenWidth)
window.scroll(this.el.offsetWidth,0);
else
this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px';
}
function eventListener(el,action,func) {
if (el) {
if (el.addEventListener)
el.addEventListener(action, func, false);
else if (el.attachEvent)
el.attachEvent('on' + action, func);
}
}
eventListener(window,'resize',layout);
layout();
</script>
</body>
</html>
关于html - 右浮动没有水平滚动条，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1633971/
25
4
0
我是一名优秀的程序员,十分优秀！