我正在努力实现这样的目标
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-左右容器未放置在内容容器旁边 所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）