划分全屏宽度&高度部分分成3排 [英] divide a full screen width & height section into 3 rows

问题描述

我有一个完整宽度和高度的html主页。我怎样才能把这部分分成3行。每个div均为全宽，并具有响应式背景图像。请建议我如何使用css来完成此操作，并且页面正在响应。

解决方案

以下是解决方案：
对于背景2添加此媒体查询CSS在您的CSS代码或媒体查询响应css结束 -

  @media（max-width ：767px）{
 .bg-2 {background-position：right center;} 
} 
  

body，html {height：100％; } .fullwidth {display：flex; flex-direction：列; height：100％;}。repeat-x {flex：1; background-size：cover;背景重复：不重复; background-position：center center; } .bg-1 {background-image：url（https://dummyimage.com/1920/800/0011ff.jpg&text=Image+1）;} .bg-2 {background-image：url（https：/ /dummyimage.com/1920/54e354/0011ff.jpg&text=Image+2);}.bg-3{background-image：url（https://dummyimage.com/1920/fa4f17/0011ff.jpg&text= Image + 3）;} @ media（max-width：767px）{。bg-2 {background-position：right center;}}

 < div class =fullwidth> < div class =repeat-x bg-1>& nbsp;< / div> < div class =repeat-x bg-2>& nbsp;< / div> < div class =repeat-x bg-3>& nbsp;< / div>< / div>  

I have a full width and height section html home page. How can I devide this section into 3 row divs. Each div is full width and has a responsive background image. Please suggest how i can do this with css and the page being responsive.

解决方案

Here is the solution below: For background 2 add this media query css at end of your css code or media query responsive css-

@media(max-width:767px){
.bg-2{background-position:right center;}
}

body,
html {
     height: 100%; 

}

.fullwidth {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.repeat-x {
  flex:1;
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center center;
  


}
.bg-1{background-image: url(https://dummyimage.com/1920/800/0011ff.jpg&text=Image+1);}
.bg-2{background-image: url(https://dummyimage.com/1920/54e354/0011ff.jpg&text=Image+2);}
.bg-3{background-image: url(https://dummyimage.com/1920/fa4f17/0011ff.jpg&text=Image+3);}

@media(max-width:767px){
.bg-2{background-position:right center;}
}

<div class="fullwidth">
  <div class="repeat-x bg-1">&nbsp;</div>
  <div class="repeat-x bg-2">&nbsp;</div>
  <div class="repeat-x bg-3">&nbsp;</div>

</div>

这篇关于划分全屏宽度&高度部分分成3排的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！