如何设置宽度以打开浏览器滚动条并停止折叠页面上的元素 [英] How to set a width to turn on browser scroll bars and stop collapsing the elements on the page
问题描述
我正在页面顶部创建横幅.它是使用3个横幅广告制作的，这些横幅广告将包含内容.当我水平缩小浏览器窗口时，我的绿色横幅组件(右侧)移动，屏幕边缘最终重叠或进入我的蓝色横幅组件下方(左侧).
I'm creating a banner at the top of my page. It's built using 3 banners that will have content. When I horizontally shrink the browser window, my green banner component(on the right) moves with the edge of the screen eventually overlapping or going under my blue banner component (on the left).
如何设置浏览器(正文?)宽度，使右侧的横幅广告停止随着缩小的浏览器移动，而是启用浏览器滚动条，以使页面停止缩小?
How do I set a browser(body?) width at which the banner on the right stops moving with the shrinking browser and instead enable the browser scroll bars so the page stops shrinking?
如果有一种完全不同/更好的方式来解决此问题，请向我提出所有建议.尝试尽可能多地学习.
If there's an entirely different/better way to approach this please throw all suggestions at me. Trying to learn as much as possible.
非常感谢您的帮助.我的代码如下.
Your help is much appreciated. My code is as follows.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
position: absolute;
top: 0;
height: 27px;
background-color: orange;
}
.rightBanner
{
position: absolute;
top: 0px;
right: 0px;
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
display: block;
}
.leftBanner
{
white-space: nowrap;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
display: block;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
推荐答案
绝对定位元素时，会将其从页面流中移出.您可以改为使用浮点数.
When you absolutely position elements you take them out of the flow of the page. You can instead use floats.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
.bannerBackground
{
width: 100%;
height: 27px;
background-color: orange;
}
.rightBanner
{
z-index: 9;
height: 27px;
padding-right: 20px;
width: 200px;
text-align: right;
color: #CCCCCC;
font-size: 20px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-weight: bold;
background-color: green;
margin:0;
float: right;
}
.leftBanner
{
white-space: nowrap;
z-index: 10;
white-space: nowrap;
margin-bottom: 0px;
width: 645px;
background-color: blue;
height: 27px;
float: left;
}
body
{
font-family: arial;
margin: 0;
padding: 0;
color: #EEEEEE;
min-width: 960px;
}
</style>
</head>
<body>
<div class="leftBanner">
</div>
<div class="rightBanner">
<div>
Some Title Text
</div>
</div>
<div class="bannerBackground">
</div>
</body>
</html>
这篇关于如何设置宽度以打开浏览器滚动条并停止折叠页面上的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
