将全屏宽度和高度部分分成 3 行答案

【问题标题】：divide a full screen width & height section into 3 rows将全屏宽度和高度部分分成 3 行
【发布时间】：2017-07-05 07:12:56
【问题描述】：

我有一个完整的宽度和高度部分的 html 主页。我如何将此部分分成 3 行 div。每个 div 都是全宽的，并具有响应式背景图像。请建议我如何使用 css 和响应式页面来做到这一点。

【问题讨论】：

尝试在您的问题中添加一些代码
如果我发布我正在处理的网页的链接可以吗？
@SubhasreeMazumder 请通过编辑您的问题包括工作尝试。您可以在编辑文本区域的工具栏中找到Code Snippet。
这是我正在处理的实际网页。 grouporigin.com/clients/upload/WAHA_AR16/index.html 。 I 主页中带有背景图像的两个部分的 div 没有响应。我怎样才能让他们响应。请建议

标签： html css

【解决方案1】：

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

【讨论】：

谢谢，但我想要 3 行 div 而不是列。我希望每个 div 都有一个响应式背景图像。
第 1 部分

第 2 部分

第 3 部分

【解决方案2】：

#page-wrap {
    display:table;
    width:90%;
    border:1px solid #999;
    border-radius:10px;
    border-spacing:10px;
    margin:auto;
    background-color:#fff;
    box-shadow:6px 6px 6px #999;
 }
#page-wrap div {
    display:table-cell;
    width:33.33%;
    padding:2%;
    border:1px solid #999;
    border-radius:10px;
    background-image:linear-gradient(to bottom,#fff,#ddd);
    box-shadow:inset 0 0 10px #999;
    font-size:1.5vw;
    word-wrap:break-word;
    color:#666; 
 }
@media screen and (max-width:800px) {
#page-wrap div {
    font-size:2.0vw;
  }
 }
@media screen and (max-width:480px) {
#page-wrap div {
    font-size:2.5vw;
  }
 }

<!DOCTYPE html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<link rel="stylesheet" href="/" media="screen">
<style media="screen">
</style>
 </head>
<body background-color:#f0f0f0;>
<div id="page-wrap">
 <div id="left"></div>
 <div id="right"></div>
 <div id="mid">
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
   ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
   amet. Sed auctor vehicula commodo.
 </p>
</div>
</div>
</body>
</html>

【讨论】：

现在可以查看了。 :-)。它是响应式的。您可以插入 bgimage 并尝试。

【解决方案3】：

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

* { 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);
}

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

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

【讨论】：

非常感谢，我现在就试试这个，看看我的图片效果如何。
@SubhasreeMazumder 很高兴我能帮上忙！祝你的网站好运！
嗨，我用过这个。您可以在链接中看到grouporigin.com/clients/upload/WAHA_AR16/index.html
屏幕变小时背景图片没有响应
嗨，我需要你的帮助

【解决方案4】：

解决方法如下：对于背景 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>

【讨论】：

非常感谢。我的网站上有这个，请看一下链接是grouporigin.com/clients/upload/WAHA_AR16/index.html 。主页中带有背景图像的两个div 部分没有响应。我怎样才能让他们响应。请建议
嗨，你在吗，我需要帮助
是的，我在这里..我认为您需要为此使用背景位置..我应该给您解决这个问题吗...？？
如果你看到，第二张背景图片，当我把屏幕变小时，人们消失了。它不工作。请问我该如何解决这个问题。感谢您的回复
只为背景 2 添加小型设备的媒体查询。在上面的答案中添加了修复。请检查并告诉我。

【解决方案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>

【讨论】：