Question

<style type="text/css">

    .container{
        position:center;
        margin-left:500px;
        margin-right:500px;
    }

    header {
        height:200px;
        background-color:green;
    }
    footer {
        height:100px;
        background-color:red;
    }

    .body {
        display:flex;
        flex-direction:row;
        height:650px;
    }

    .side {
        background-color:yellow;
        flex:0.5;
    }

    .middle {
        background-color:teal;
        flex:2;
    }
</style>    
</head>

<body>
<div class="container">
    <header> I'm a header idiot</header>
    <div class="body">
        <div class="side"> Stuff</div>
        <div class="middle">More Stuff</div>
    </div>
    <footer>SHEEEEEEEEEET</footer>
</div>
</body>

我试图制作一个格式与此类似的网页：

desired layout

我目前的代码是一种非常粗糙的方式，但它并没有按窗口大小进行缩放，只相对于我的屏幕尺寸看起来很好。我错过了什么？它应该以页面为中心，而不是宽度分布在整个屏幕上。

Answer 1

将您的.container更改为此。你可以使用任何你喜欢的宽度。

.container {
    /* position:center; */
    margin-left:auto;
    margin-right:auto;
    width:100%
}

.container {
  /* position:center; */
  margin-left: auto;
  margin-right: auto;
  width: 100%
}
header {
  height: 200px;
  background-color: green;
}
footer {
  height: 100px;
  background-color: red;
}
.body {
  display: flex;
  flex-direction: row;
  height: 650px;
}
.side {
  background-color: yellow;
  flex: 0.5;
}
.middle {
  background-color: teal;
  flex: 2;
}

<div class="container">
  <header>I'm a header</header>
  <div class="body">
    <div class="side">Stuff</div>
    <div class="middle">More Stuff</div>
  </div>
  <footer>footer</footer>
</div>

Answer 2

你必须删除：

.container {
    margin-left: 500px;
    margin-right: 500px;
}

您的代码中的

将解决您的问题。

检查Fiddle

获得与图像相同的输出（如中心div）。给父母text-align:center;。这里的身体就是父母。

body{
    text-align:center;
}

检查Updated Fiddle

Answer 3

<!DOCTYPE html>

<style>
   #main{
       height:500px;
       width:100%;

}
#div1{
    width:99%;
    height:25%;
    border: 2px solid;
    margin-bottom:2%;
    top: 30px;
}
#div2{
    width:20%;
    height:60%;
    border: 2px solid;
    margin-bottom:2%;
    float:left;
}
#div3{
    width:78%;
    height:60%;
    border: 2px solid;
    margin-bottom:2%;
    float:right;
}

#div4{
    width:100%;
    height:10%;
    border: 2px solid;
    float:left;

}
</style>
<body>
  <div id="main">
  <div id="div1">11
  </div>
  <div id="div2">33
  </div>
  <div id="div3">222
  </div>
<div id="div4">
test
</div>
</div>
  </body>
  </html>

Answer 4

描述： - 您需要为调整所有布局提供保证金，并且需要删除（.container）Class .Below是您可以检查的代码。

代码： -

 <style type="text/css">

    .body {
        display:flex;
        flex-direction:row;
        height:650px;
    }



    header {
        height:200px;
        background-color:green;
        margin:20px 20px 0px 20px;
    }
    footer {
        height:100px;
        background-color:red;
        margin:15px 20px 0px 20px;
    }



    .side {
        background-color:yellow;
        flex:0.5;
        margin:15px 10px 0px 20px;
    }

    .middle {
        background-color:teal;
        margin:15px 20px 0px 10px;
        flex:2;
    }







</style>    
</head>

<body>
<div >
    <header> I'm a header bitch</header>
    <div class="body">
        <div class="side"> Stuff</div>
        <div class="middle">More Stuff</div>
    </div>
    <footer>SHEEEEEEEEEET</footer>
</div>
</body>

如何正确格式化页眉，页脚和2个正文元素？

4 个答案: