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

html-左右容器未放置在内容容器旁边,第1张

概述我正在努力实现这样的目标Image: How I would like it to look (disregard the white spaces in the image)但是,左右容器不会粘在我的内容容器上.它们也没有正确排列在顶部.我很困惑为什么.我已经设定好花车和最高位置,但仍然无法使用.我必须将主容器保持在相对位置.html, body {

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

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 >        <div >            <p>This is the left container</p>        </div>                <div >            <p>This is the content container</p>        </div>                <div >            <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 >        <div >            <p>This is the left container</p>        </div>                <div >            <p>This is the content container</p>        </div>                <div >            <p>This is the right container</p>        </div>    </div></body></HTML>
总结

以上是内存溢出为你收集整理的html-左右容器未放置在内容容器旁边 全部内容,希望文章能够帮你解决html-左右容器未放置在内容容器旁边 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1105150.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存