我创建了一个网站,我无法使平铺布局响应。我是初学者,我不知道如何使我的网站响应。任何帮助将不胜感激。 css和html如下。加上背景重复3次,而我在css中没有添加重复属性。
HTML
<div class="grid">
<div class="tile hvr-reveal " id="tile1">
<div style="text-align: center;">
<div class="img-with-text ">
<p>
<strong>
<a href="Contact.html" style="text-decoration:none">Contact Us </a>
</strong>
<img src="homepage images/file242.png" alt="sometext" width="64" height="64" id="img0"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile2">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
<a href="products.html" style="text-decoration:none">Products</a>
</strong>
<img src="homepage images/shopping145.png" alt="sometext" width="64" height="64" id="img"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal " id="tile3">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
<a href="partners.html" style="text-decoration:none">Partners</a>
</strong>
<img src="homepage images/celebration19.png" alt="sometext" width="64" height="64" id="img2"/>
</p>
</div>
</div>
</div>
<div class="tile hvr-reveal" id="tile4">
<div style="text-align: center;">
<div class="img-with-text">
<p>
<strong>
<a href="ABOUTUS.HTML" style="text-decoration:none">About Us</a>
</strong>
<img src="homepage images/men16.png" alt="sometext" width="64" height="64" id="img1"/>
</p>
</div>
</div>
</div>
</div>
CSS
body {
font-family: chewy;
color: #ffffff;
background-image: url(pictures%20for%20web/bg3.jpg) ;
background-position: center center;
background-attachment: fixed;
background-size: cover;
**strong text**background-repeat: no-repeat;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
.grid {
width: 1140px;
height: 650px;
margin: auto;
}
.tile {
position: absolute;
width: 200px;
left: 451px;
top: 152px;
height: 152px;
box-sizing: border-box;
}
#tile1 {
top: 407px;
left: 754px;
width: 338px;
height: 196px;
margin-left: 2px;
margin-right: 2px;
background-color: #ff3300;
}
#tile2 {
margin-left: 2px;
margin-right: 2px;
top: 100px;
left: 980px;
width: 148px;
height: 154px;
background-color: #008000;
}
#tile3 {
top: 255px;
left: 523px;
width: 200px;
height: 150px;
background-color: #660066 ;
margin-left: 2px;
margin-right: 2px;
}
#tile4 {
top: 255px;
left: 118px;
width: 200px;
height: 150px;
background-color: #990000;
margin-left: 2px;
margin-right: 2px;
}
答案 0 :(得分:0)
我猜你想要这样的东西:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
.container {
position: relative;
top: 0;
left: 0;
width: 90%;
height: auto;
margin-left: 5%;
background-color: #444;
display: block;
text-align: center;
}
.box {
border: solid 1px #000;
height: 200px;
width: 200px;
display: inline-block;
margin: 25px auto;
}
.box:nth-of-type(1){
background: yellow;
}
.box:nth-of-type(2){
background: red;
}
.box:nth-of-type(3){
background: blue;
}
.box:nth-of-type(4){
background: green;
}
这将保持框对齐,并根据浏览器的宽度,移动它们。