Question

我想将中间部分div置于顶部以进行@media查询 - 然后我想将左侧部分和右侧部分div并排堆叠在一起以获得响应清晰的设计，可能用于移动也是如此。

这是我的代码 - 任何帮助将不胜感激！感谢。

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel='stylesheet' href="needhelpagain.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Abril+Fatface|Arvo|Josefin+Slab|Lato|Old+Standard+TT|Open+Sans|PT+Sans|PT+Serif|Roboto|Ubuntu|Vollkorn|Dancing+Script">

    <title></title>
</head>
<body>



<header></header>


<div class="container">


<div class="left-portion"></div>


<div class="middle-portion">Blank Content</div>


<div class="right-portion"></div>

</div>


</body>
</html>

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background-color:#1a0000;
}

.container{
    margin:auto;
    width:80%;
    overflow:hidden;
    background-color:white;
}

header{
    padding:50px;
    background-color:#000000;

}

.left-portion{
    width:22%;
    height:1200px;
    float:left;
    background-color:#fff3e5;


}

.middle-portion{
    width:56%;
    height:100%;
    float:left;
    background-color:#ffffff;
    color:#000000;
    font-family:'old standard tt';
    text-align:center;
}

.right-portion{
    width:22%;
    height:1200px;
    float:left;
    background-color:#fff3e5;
    font-family:'vollkorn';
}

Answer 1

你或许能够将div放在顶部，你将它标记为左边..将100％宽度设置为其他2个div设置为50％并将容器中的所有div设置为位置相对的。并且底部div向左浮动。

    <style>
.container{
    height: 1200px;
    width: 100%;
}
.container div{
    position: relative;
}
.topDiv{
    width:100%;
    height:100px;
}
.botDivs{
    width:50%;
    height: 200px;
    float: left
}
.green{
    background:green;
}
.red{
    background:red;
}
.blue{
    background:blue;
}
</style>

<div class="container">
<div class="topDiv red"></div>
<div class="botDivs green"></div>
<div class="botDivs blue"></div>
</div>

命令放置3个div

1 个答案: