在 CSS 中，边距和溢出不起作用

Question

我是 CSS 的新手。我正在构建一个包含 3 列的网页 - 左边一列用于导航，中间一列用于页面内容，右边一列用于外部链接和注释。首先，当我使用百分比宽度时，溢出起作用了。现在溢出不起作用，右边框也消失了。这是我的代码。请帮帮我。提前致谢。

//Total pixels: 1366px. (I found this after running a given code on www.w3schools.com).

#rightcontentborder {
    border: 2px solid;
    padding: 5px;
/*  border-radius: 1em;*/

//Left-margin = 1366 - 716 = 650px.
    margin-left: 650px;         
    margin-right:1366px;        

//  width:50px;
    height:700px;
//  overflow:scroll;
    float: right;
    position: absolute;
}

#maincontentborder {
    border: 2px solid;
    padding: 5px;
//  background: #dddddd;

    margin-left: 216px;         
//Given width=500px.
//Right-margin = 1366 - (216+500) = 1366-716 = 650px.
    margin-right: 650px;        

//  width: 100px;
    height: 700px;

    overflow: scroll;
//  float: center;
}

#leftcontentborder {
    border: 2px solid;
    padding: 5px;
//  background: #dddddd;
/*  border-radius: 1em;*/

    margin-left:0px;        /*I have added this line to adjust the left margin of the LEFT content*/
    margin-right:1150px;    /*I have added this line to adjust the right margin of the LEFT content*/
//Width = 1366-1150 = 216px.

    height:700px;

//  float: left;
    position: absolute;
}

Answer 1

如果我准确地得到你的要求，你需要3栏页。 css 你写的不准确。你必须使用 float 来实现这个。让我们看看预期的 html

<div class="container">
    <div class="left-content">
        <!-- left sidebar content --> 
    </div>
    <div class="main-content">
        <!-- main content -->
    </div>
    <div class="right-content">
        <!-- right sidebar content -->
    </div>
</div>

假设 div 的宽度相对于左侧、主要和右侧分别为 300px、600px 和 300px。

.container {
    overflow: hidden;
    width: 100%;
    max-width: 1200px; 
}

.left-content {
    width: 25%;
    max-width: 300px;
    float: left;
    min-height: 700px;
}

.right-content {
    width: 25%;
    max-width: 300px;
    float: left;
    min-height: 700px;
}
.main-content {
    width: 50%;
    max-width: 600px;
    float: left;
    min-height: 700px;
}

尝试了解 css 相对于 html 的用法。并根据您的尺寸进行定制。祝你好运。

在 CSS 中，边距和溢出不起作用

In CSS, margin and overflow not working

css

border

margin

overflow

css-float