html-左右容器未放置在内容容器旁边

我正在努力实现这样的目标

Image: How I would like it to look (disregard the white spaces in the image)

但是,左右容器不会粘在我的内容容器上.它们也没有正确排列在顶部.我很困惑为什么.我已经设定好花车和最高位置,但仍然无法使用.我必须将主容器保持在相对位置.

html,body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.main-container {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    background: green;
    padding: 0;
    margin: 0;
}
.left-container {
    position: relative;
    top: 0;
    left: 0%;
    float: right;
    width: 10%;
    min-width: 100px;
    max-width: 100px;
    background-color: blue;
    display: block-inline;
}
.content-container {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    min-width: 800px;
    max-width: 800px;
    height: auto;
    background: red;
    display: block-inline;
}
.right-container {
    position: relative;
    top: 0;
    right: 0%;
    float: left;
    width: 10%;
    min-width: 100px;
    max-width: 100px;
    background-color: purple;
    display: block-inline;
}

<html>
<body>
    <div class="main-container">
        <div class="left-container">
            <p>This is the left container</p>
        </div>
        
        <div class="content-container">
            <p>This is the content container</p>
        </div>
        
        <div class="right-container">
            <p>This is the right container</p>
        </div>
    </div>
</body>
</html>

最佳答案

一世
例如在这种情况下使用flexBox：

h1,h2 {
  font-family: Lato;
}
    html,body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100%;
    }
    .main-container {
        top: 0;
        left:0;
        width: 100%;
        height: 100%;
        background: green;
        padding: 0;
        display:flex;
        margin:0 auto;
        justify-content: center;
        align-content: flex-start;
    }
    .right-container {
        top:0;
        min-width: 10% ;
        background-color: purple;
        height:100%;
 }
    .left-container {
        top: 0;
        min-width: 10%;
        background-color: blue;
        height:100%;
 }
    .content-container {
        top:0;
        background: red;
        width:800px;
        height:100%;
        max-width:80%;
    }

<html>
<body>
    <div class="main-container">
        <div class="left-container">
            <p>This is the left container</p>
        </div>
        
        <div class="content-container">
            <p>This is the content container</p>
        </div>
        
        <div class="right-container">
            <p>This is the right container</p>
        </div>
    </div>
</body>
</html>

html-左右容器未放置在内容容器旁边

猜你在找的HTML相关文章