Question

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

基本上，我想做的是有一个主div和一个边界div。主要的div将是700px宽并且居中。边界div将是300px宽，并且：

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

我希望这有点道理。这是我的问题的示例代码。如果你在浏览器中尝试（在我的情况下是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>

Answer 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的包装器。基础知识是。

#border

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

#container的

余量左。添加边距以清除边界div。

#center

保证金：0自动。使div在其父

@media screen和（max-width：1000px）{}

这是一个CSS3选择器，当屏幕窄于1000px时，它将导致使用其他样式。

#container的

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

#border

右：700像素。将#border的右侧定位为距离屏幕右侧700px。当屏幕缩小时，使div从屏幕左侧滑落。

由于使用了CSS3功能，因此只能在兼容的浏览器中使用。确保您在所有支持的浏览器中进行测试。

将div左对齐，调整大小时浮动屏幕外的最小边距

1 个答案:

#border

#container的

#center

@media screen和（max-width：1000px）{}

#container的

#border