我正在努力实现这样的目标
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：
例如在这种情况下使用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>
