Question

请参阅随附的线框。我正在使用蓝图css。我希望除了标题之外的所有东西都在980px的容器中。

对于标题，我希望左列是流畅的。一直在增长触摸浏览器的左侧。你怎么能建立一个容器，它有一个只在一侧流动的标头？

我希望线框有助于解释问题。如果没有，请告诉我。感谢

Wireframe

Answer 1

不确定我是否正确解释了您的问题，但我认为唯一的方法是使用容器和横幅区域的z-index。

例如，您的CSS将是：

body { margin: 0; }
#container { width:980px; margin: 0 auto; z-index: 1; background-color: black; height:500px; }
#logo { width:200px; height:50px; background-color: red; }
#header-left { position: absolute; top:0; left:0; height:50px; width:50%; z-index: 0; background-color: red; }

然后是你的HTML：

<div id="header-left"></div>
<div id="container">
    <div id="logo"></div>
</div>

希望这有帮助。

Answer 2

让我看看我是否正确，您希望您的标题始终位于右上角和左上角而不影响容器位置？好吧，为什么不把这个标题从容器中拿出来，确保你的体边距设置为0，这样你的标题实际上完全位于文档的左上角，使标题具有绝对位置。

body {
    margin: 0px;
}

.header {
    width: 200px;
    position:absolute;
}
.container {
    width: 980px;
    margin:0 auto;
}

<body>
<div class="header"></div>
<div class="container"></div>
</body>

创建具有一个流体侧的标题

2 个答案: