Question

我有一个完整的宽度和高度部分html主页。如何将此部分划分为3行div。每个div都是全宽并具有响应的背景图像。请建议我如何使用css和页面进行响应。

Answer 1

以下是以下解决方案：对于背景2，在css代码或媒体查询响应css -

的末尾添加此媒体查询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>

Answer 2

<html>
<head>
    <title></title>
</head>
<body>
    <div style="width: 100%;">
        <div style="width: 35%; float: left;  background-color:blue; padding-right:20px;">
            Div 1
        </div>

        <div style="width: 30%; float: left;background-color:cyan;">
            Div 2

        </div>


        <div style="width: 30%; float: left; background-color:gold;">
            Div 3
        </div>
    </div>
</body>
</html>

Answer 3

＆＃13;

std::result_of

＆＃13;

std::result_of

＆＃13;

Answer 4

我认为使用flexbox是最好的方法。看看这支笔：http://codepen.io/anon/pen/qRwZyW

＆＃13;

* { margin: 0; padding: 0; }
html,
body,
.container {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.child1 {
  background-image: url(https://unsplash.it/1201/1301/?random);
}

.child2 {
  background-image: url(https://unsplash.it/1202/1302/?random);
}

.child3 {
  background-image: url(https://unsplash.it/1203/1303/?random);
}

＆＃13;

<div class="container">
  <div class="child child1"></div>
  <div class="child child2"></div>
  <div class="child child3"></div>
</div>

＆＃13;

flexbox指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 5

您可以使用3 div将页面划分为3行，并为每个div提供height

<html>
<head>
   <style type="text/css">
    .wrapper
    {
        height:  100%;
        width: 100%;
    }
    .div1,.div3
    {
    height: 33.33%; 
    background-color:yellow; 

    }
    .div2
    {
        height: 33.33%; 
    background-color:red;
    }
   </style>
</head>
<body>
    <div class="wrapper">
        <div class="div1">
         Div 1
        </div>

        <div  class="div2">
            Div 2

        </div>


        <div class="div3">
            Div 3
        </div>
    </div>
</body>
</html>

划分全屏宽度＆amp;高度部分分为3行

5 个答案: