Question

帮助！我是新手，我需要快速的帮助！我有两个列布局，我使用Dreamweaver的模板（2列液体）我的大部分网站都准备好了，但是当我在浏览器中打开它时，它看起来完全不同。 .container中的文字和图片泄漏到.sidebar1。我将侧边栏设置为float: left，将容器设置为float: right，但我没有尝试过任何工作。请帮忙！我需要今晚解决这个问题！拜托，谢谢！

.sidebar1 {
    float: left;
    width: 180px;
    background-color: #C7776C;
    margin-bottom: -10000px;
    padding-bottom: 10000px;
    height: 100%;
    overflow: hidden;
}

.header {
    min-height: 160px;
    background-color: #E7C082;
}

.container {
    float: right;
    width: 993px;
    background-color: #FEF3C8; /* the auto value on the sides, coupled with the width, centers the layout */
    height: 100%;
    margin-top: 0;
    margin-bottom: auto;
    padding-bottom: 0;
    overflow: hidden;
    margin-left: 0;
}

Answer 1

尝试将CSS代码更改为：

.sidebar1 {
    position: absolute;
    top: 180px;
    width: 180px;
    background-color: #C7776C;
    height: 100%;
    overflow: hidden
}

.header {
    min-height: 160px;
    background-color: #E7C082;
}

.container {
    position: absolute;
    top: 180px;
    left: 200px;
    width: 993px;
    background-color: #FEF3C8; /* the auto value on the sides, coupled with the width,       centers the layout */
    height: 100%;
    margin-top: 0;
    margin-bottom: auto;
    padding-bottom: 0;
    overflow: hidden;
    margin-left: 0;
}

这是一个解决方案的小提琴：http://jsfiddle.net/pEdf2/2/

容器泄漏到侧边栏

1 个答案: