将全屏宽度和高度部分分成3行
<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行divs而不是列。我希望每个div都有一个响应式背景图像。 –
#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并尝试。 – khushi
我觉得用那么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>指南Flexbox的：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
非常感谢，我现在就试试看，看看它是如何与我的图像。 –
@SubhasreeMazumder很高兴能帮到你！祝你网站好运！ – Hendry
嗨，我用过这个。你可以在链接http://www.grouporigin.com/clients/upload/WAHA_AR16/index.html –
这里是下面的解决方案： 有关背景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"> </div>
<div class="repeat-x bg-2"> </div>
<div class="repeat-x bg-3"> </div>
</div>非常感谢。我在我的网站上有这个，请看看这个链接是http://www.grouporigin.com/clients/upload/WAHA_AR16/index.html。主页中带有背景图片的div的两个部分没有响应。我怎样才能让他们回应。请建议 –
嗨，你在那里，我需要帮助 –
是的，我在这里..我认为你需要玩这个背景位置..我应该给你的解决方案...？ –
您可以通过使用3 div把网页切成3排，并给予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>
尝试添加一些代码，你的问题 – Seeker
没有代码，没有骰子 –
是它好吧，如果我张贴我正在工作的网页的链接。 –