3つのdivの配置を注文する

@mediaクエリのために中間部分divを上に配置したいと思います。次に、その下に左部分と右部分のdivを横に並べて、きれいに見えるデザイン、おそらくモバイル用にも。3つの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'; 
}

出典

2017-12-17 tkss44

あなたは100％の幅が、他の2つのdivが50％とセットとしてdiv要素のすべてを設定していることを確認してください...それは左とラベル付け持っ上のdivを作ると離れて得ることができるかもしれません相対位置を定めるためのコンテナ。そして、下のdivsが左に浮かびます。

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

出典

2017-12-17 00:53:04 hackdotslashdotkill

3つのdivの配置を注文する

答えて

関連する問題