的CSS

Question

我正在尝试使用侧边栏和右侧的内容部分创建一个非常常见的布局。我的侧边栏部分的宽度为fixed（此处为120px），我希望右侧的容器占据页面的剩余空间（右端的边距为60px）。

以下是标记的外观：

<body>
    <div class="wrapper">
        <div class="content">
            <div class="left-sidebar">
                <ul class="sidebar-menu">
                    <li>Item 1</li>
                    <li>Item 2</li>
                </ul>
            </div>
           <div class="right-main-content">
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
           </div>
        </div>
    </div>
</body>

以上是上述的小提琴：http://jsfiddle.net/6nLtp/

就我而言，正在发生的事情是正确的容器位于侧边栏下方并占据100％的宽度。但是，我预计它只会占据侧边栏右侧的剩余空间（并且页面右侧的边距为60px）。当我指定宽度时，容器随侧边栏一起出现，但我不知道为什么我需要这样做？由于div元素（侧边栏和右侧容器是浮动的），为什么正确的内容不能与侧边栏一起使用？

Answer 1

我不知道如果它是好的代码，但它为我工作

.wrapper {width:100%;height:100%;}
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; float:left;}
.right-main-content{margin:20px 60px 0 140px; display:block;padding-top:5px; }
.right-main-content p {border: 1px solid green;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

Answer 2

试试这个

CSS

.wrapper {width:100%;height:100%;display:inline-block;}
.left-sidebar {max-width:120px;width:20%;height:200px;margin:20px 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:20px 60px 0 0;width:80%;border: 1px solid green;float:right;}

DEM0

Answer 3

试试这个...... Updated Link

.wrapper {width:100%;height:100%;}
.content{position:relative;}
.left-sidebar {width:120px;height:200px;margin:20px 0 0 0;border:1px solid red; position:absolute; }
.right-main-content{margin:20px 0px 0px 0px;padding:20px 10px;border: 1px solid green; position:absolute; left:140px;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

祝你好运......享受

Answer 4

您可以将左侧<div>设置为固定位置，并将右侧<div>向左浮动。如果这样做，请确保使用适当的边距来计算左div所占的空间。

.wrapper {
width:100%;
height:100%;
}
.left-sidebar {
    position: fixed;    /*---- changed this --->*/
    width:120px;
    height:200px;
    margin:20px 0 0 0;
    border:1px solid red;
}
.right-main-content{
    float: left;              /*---- changed this --->*/
    width: auto; 
    margin:20px 0 0 122px;     /*---- changed this --->*/
    border: 1px solid green;
}
.sidebar-menu{
    list-style-type:none;
}
.content{
    margin: 0px auto;
}

工作示例：

http://jsfiddle.net/6nLtp/6/

Answer 5

使用float来获得结果。

的CSS

.wrapper {width:100%;height:100%;}
.content{padding-top:20px;}
.left-sidebar {width:120px;height:200px;margin:0 0 0 0;border:1px solid red;float:left;}
.right-main-content{margin:0 60px 0 140px;border: 1px solid green;}
.sidebar-menu{list-style-type:none;}
.project-picture-bar{height:100px;width:100%;border-top:3px solid grey;border-bottom:3px solid grey;}

demo

使div在侧边栏后留下剩余的空间

5 个答案:

的CSS