使用CSS查詢排列元素
[英]Arranging elements using CSS queries
問題描述
我有一個非常簡單的網站，我正在嘗試編寫一個CSS查詢，以使元素在調整屏幕大小時能夠正確排列。
您可以看一下我擁有的布局以及我想要實現的布局。
這就是我想要得到的結果（問題在＃6上移）：
這是INDEX.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/grid.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/queries.css">
<title>Document</title>
</head>
<body>
<header>
<div class="row">
<img src="img/header.png" alt="Voltaren" class="header_image">
</div>
</header>
<section class="middle">
<div class="row_2">
<div class="col span-1-of-3 middle_1">
<img src="img/Middle_1.png" alt="">
</div>
<div class="col span-1-of-3 middle_2">
<img src="img/Middle_2.png" alt="">
</div>
<div class="col span-1-of-3">
<img src="img/Middle_3.png" alt="">
</div>
</div>
</section>
<section class="bottom">
<div class="row_2">
<div class="col span-2-of-3 bot_img">
<img src="img/Bottom_1.png" alt="">
</div>
<div class="col span-1-of-3 ">
<img src="img/Bottom_2.png" alt="">
</div>
</div>
</section>
<footer>
<div class="row_2">
<img src="img/Footer.png" alt="">
</div>
</footer>
</body>
</html>
和querys.css
/*-----------Small tablet to big tablet from 768 px - 1023px---------------*/
/*-----------Average phones from 481 px - 767px---------------*/
@media only screen and (max-width: 850px){
.middle{
padding: 0 2%;
}
}
/*-----------Average phones from 481 px - 767px---------------*/
@media only screen and (max-width: 767px){
.middle_1{
width: 49%;
}
.middle_1 img{
width: 95%;
}
.middle_2{
width: 49%;
margin-left: 2%;
}
.middle_2 img{
width: 95%;
}
}
2 個解決方案
解決方案1
2 已采納 2016-10-21 08:30:13
如果要在布局中使用flexbox，則可以使用order屬性來重新order塊，如果不使用flexbox，則應該。 演示小提琴
<div class="container">
<div class="block block-1 width-100">1</div>
<div class="block block-2 width-33">2</div>
<div class="block block-3 width-33">3</div>
<div class="block block-4 width-33">4</div>
<div class="block block-5 width-66">5</div>
<div class="block block-6 width-33">6</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.block {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
.block-1 {
background: green;
}
.block-2 {
background: red;
}
.block-3 {
background: yellow;
}
.block-4 {
background: blue;
}
.block-5 {
background: purple;
}
.block-6 {
background: brown;
}
.width-100 {
width: 100%;
}
.width-66 {
width: 66%;
}
.width-33 {
width: 33%;
}
@media all and (max-width: 560px) {
.width-33 {
width: 50%;
}
.block-1 {
order: 1;
}
.block-2 {
order: 2;
}
.block-3 {
order: 3;
}
.block-4 {
order: 4;
}
.block-5 {
order: 6;
width: 100%;
}
.block-6 {
order: 5;
}
}
解決方案2
0 2016-10-21 08:21:24
在代碼中將Div 6在Div 4和Div 5之間移動。 為其賦予樣式float: right 。 在小視圖中，刪除float: right將Div 6放到Div 4旁邊，作為inline-block 。
使用CSS排列元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.