-2

我正在尝试在窗口左侧实现一个栏，设置宽度，另一个 div 填充窗口右侧。我试过使用“float:left;” 两者都有，但这会导致“右”区域堆叠在左栏下方。

正确的

这是正确的，除了我需要右边的白色区域被另一个 div 填充。根据我目前的尝试，会发生以下情况：

问题

如何让底部 div 填充右侧的白色区域？黑色渐变是背景：设置，并将正确缩放。

谢谢！

4

3 回答 3

1

我已经想出了如何做到这一点......对于其他需要知道如何做的人：

对于左栏，您需要一个已知的宽度，在此将 %width% 替换为您的宽度...

CSS：

.leftBar{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    color:white;
    height: 100%;
    width: %width%;
}
.mainCenterContent{
padding-left:%width%;
width:100%;
height:100%;
}

HTML：

<div class="leftBar">
bleh
</div>
<div class="mainCenterContent">
    bleh
</div>

正如您所看到的，填充基本上将 div 移动到足以不与左栏相交的程度。这对我来说工作正常。

谢谢！

于 2013-01-16T01:35:56.057 回答
0

尝试拥有一个

clear:both;

在两个组件之后。

看到这个：侧边栏

于 2013-01-16T01:36:17.510 回答
0

这是另一种方法：

<style>
body, html {
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
}
div#left_nav {
  position:relative;
  width:250px;
  float:left;
  background-color:#58A;
  height:100%;
}
div#page_content {
  position:static;
  background-color:#CDF;
  height:100%;
}


<body>
  <div id="left_nav">left menu</div>
  <div id="page_content">page content</div>
</body>

有许多不同的方法可以制作 2 列布局。有些比其他的更复杂。我发现，我的设计越复杂，我的布局就需要越健壮。四处搜索，您会找到最适合您需求的。

于 2013-01-16T01:48:44.980 回答