将 div 与在调整大小时浮动到屏幕外的最小边距对齐答案

【问题标题】：Align div left with minimum margin that floats offscreen on resize将 div 与在调整大小时浮动到屏幕外的最小边距对齐
【发布时间】：2011-06-23 12:51:29
【问题描述】：

我的 CSS 词汇让我失望了。我确信这可以做到，但我不知道如何正确地陈述我的问题.... CSS/HTML 真的不是我的事 :(

基本上，我想做的是有一个主 div 和一个边框 div。主 div 将是 700px 宽并居中。边框 div 的宽度为 300 像素，并且：

如果屏幕尺寸大于 1000px (300px+700px=1000px)，则对齐屏幕左侧
如果屏幕尺寸小于 1000 像素，则退出屏幕。例如，如果浏览器的宽度为 800 像素，则边框 div 将位于左侧 200 像素（700 像素-1000 像素=-200 像素）。

我希望这是有道理的。这是我的问题的示例代码。如果您在浏览器中尝试（在我的情况下为 FF），您会发现当浏览器屏幕大于 1000 像素时，中心为“居中”，边框为“左”对齐。但是，如果您调整浏览器大小，边框会保持在“左侧”而不是推离屏幕，并且中心会下降。

HTML：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Page</title>
    <style type="text/css">
        #border {
            background-color: red;
            width:300px;
            height:900px;
            float:left;
        }

        #center {
            background-color: yellow;
            width:700px;
            height:900px;
            float:left;
            left:50%;
    }
</style>
</head>    
<body>
    <div id="border"></div>
    <div id="center">
        <div id="logo"></div>
        <div id="content"></div>
    </div>    
</body>
</html>

【问题讨论】：

标签： css

【解决方案1】：

希望这将接近您想要的。

#container{margin-left:300px;}
#border {
         background-color: red;
         width:300px;
         height:900px;
         position:absolute;
         top:0;
         left:0;
}

#center {
         background-color: yellow;
         width:700px;
         height:900px;
         margin:0 auto;
}

@media screen and (max-width: 1000px) {
    #container{margin-left:0;float:right;width:700px;}
    #border{left:auto;right:700px;}
}

HTML 已更新，在容器 div 中包含一个用于中心 div 的包装器。基础是。

#边框

位置：绝对。从文档流中删除 div。
顶部，左侧。将边框放在页面的左上角。

#容器

左边距。添加边距以清除边框 div。

#center

边距：0 自动。使 div 在其父级中居中

@media 屏幕和（最大宽度：1000px）{}

这是一个 CSS3 选择器，当屏幕小于 1000 像素时，将使用替代样式。

#container

浮动：正确。使容器与屏幕右侧对齐。

#边框

右：700 像素。将#border 的右侧定位为距屏幕右侧 700 像素。使 div 在屏幕缩小时从屏幕左侧滑出。

由于使用 CSS3 功能，这仅适用于兼容的浏览器。确保在所有支持的浏览器中进行测试。

【讨论】：

谢谢，我会尝试为 IE8 及以下版本提供一些东西。但这是一个很好的开始，很好地解释了一切。
我只是为 IE8 及以下版本添加了一个条件 JS 包含一个 jquery 函数，如果浏览器小于 1000 像素，该函数通过应用正确的 css 来模拟媒体最大宽度。如果有人看到这个并且很好奇，使用的 Jquery 函数是 .resize() 和 .width()。如果 JS 被禁用，显然不会工作，但你不能取悦所有人，我只是一个志愿者：P