Question

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

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

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

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>

Answer 1

我例如在这种情况下使用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>

Answer 2

在这个例子中，我只是将所有元素浮动到了左边；它们会按照出现的顺序一个接一个地向左浮动。我还在主容器后添加了一个清晰的浮点数，以恢复正常位置。我删除了所有的顶部和左侧位置，因为这些位置对于实现您的目标不是必需的。

我删除了px并只使用％。

我在第一个示例下方添加了第二个示例（由于主容器的100％高度属性，您必须进行滚动），该示例使用具有max-width和max-height属性的px。

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;
}

.main-container>div {
  float: left;
}

.main-container::after {
  clear: both;
}

.left-container {
  width: 10%;
  background-color: blue;
}

.content-container {
  width: 80%;
  background: red;
}

.right-container {
  width: 10%;
  background-color: purple;
}

.main-container2 {
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  background: green;
  padding: 0;
  margin: 0;
}

.main-container2>div {
  float: left;
}

.main-container2::after {
  clear: both;
}

.left-container2 {
  width: 100px;
  max-width: 100px;
  max-height: 60px;
  background-color: blue;
}

.content-container2 {
  width: 300px;
  max-width: 300px;
  max-height: 60px;
  background: red;
}

.right-container2 {
  width: 100px;
  max-width: 100px;
  max-height: 60px;
  background-color: purple;
}

<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>

  <div class="main-container2">
    <div class="left-container2">
      <p>max width - left container</p>
    </div>

    <div class="content-container2">
      <p>max width - content container</p>
    </div>

    <div class="right-container2">
      <p>max width - right container</p>
    </div>
  </div>

</body>

</html>

Answer 3

在过去，它很难与布局混合使用，但是现在有了Grid非常容易。

看看下面的例子，我把布局做成网格。点击here，以了解有关网格的更多信息。

.header-container {
  grid-area: header;
   background:red;
}
.content-container {
  grid-area: main;
   background:blue;
}


.left-container {
  grid-area: leftMenu;
  background:green;
}
.right-container {
  grid-area: rightMenu;
  background:#CCC;
}

.footer-container {
  grid-area: footer;
  background:red;
}

.main-container {
  display: grid;
  grid-template-columns: 20% 400px 400px 20%;
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "leftMenu main main rightMenu"
    "footer footer footer footer";
   
}

   <div class="main-container">
        <div class="header-container">
         <p>This is the header container</p>
        </div>
   
        <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 class="footer-container">
            <p>This is the footer container</p>
        </div>
    </div>

Answer 4

您可以将FlexBox用于此任务。 JSFiddle-http://jsfiddle.net/gj7a8qvn/4/

.body {
  margin: 0;
}

.main-container {
  display: flex;
  width: 100%;
}

.left-container {
    background-color: blue;
    flex: 1;
}

.content-container {
    background-color: red;
    width: 800px;
}

.right-container {
    background-color: purple;
    flex: 1;
}

<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>

左右容器未位于内容容器旁边

4 个答案: