Html 创建具有一个流体侧的收割台_Html_Css

Html 创建具有一个流体侧的收割台

html css

Html 创建具有一个流体侧的收割台,html,css,Html,Css,请参阅所附的线框。我正在使用blueprint css。我想所有的东西，除了标题是在一个980px的容器对于标题，我希望左边的列是流动的。始终增长到触摸浏览器的左侧。您如何构建一个容器，它的头只有一面是流体我希望线框有助于解释这个问题。如果没有，请告诉我。谢谢让我看看我是否正确，您希望您的标题始终位于顶部和左上角，而不影响容器的位置吗？那么，为什么不把标题从容器中取出，确保正文边距设置为0，使标题实际上完全位于文档的左上角，并使标题具有绝对位置 body { margin: 0px

请参阅所附的线框。我正在使用blueprint css。我想所有的东西，除了标题是在一个980px的容器

对于标题，我希望左边的列是流动的。始终增长到触摸浏览器的左侧。您如何构建一个容器，它的头只有一面是流体

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

让我看看我是否正确，您希望您的标题始终位于顶部和左上角，而不影响容器的位置吗？那么，为什么不把标题从容器中取出，确保正文边距设置为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>

正文{
边际：0px；
}
.标题{
宽度：200px；
位置：绝对位置；
}
.集装箱{
宽度：980px；
保证金：0自动；
}

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

例如，您的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>

希望这有帮助。

对不起，不是这样。在容器（980px）中，我想要一个宽200px的标题，位于容器的左侧。然后在容器外部，在主体中，我想要一个div从浏览器的左边缘延伸，一直延伸到标题（200px单位），但不要超过它。我不想让流体集管bkg一直到右brower侧。这有用吗？