我的联系页面上有三个水平放置的图标。当您将浏览器调整到大约手机大小（480px左右）时，问题就出现了，div开始流过另一个并且图像堆叠在顶部并且实际上不是我想要发生的事情。我希望他们要么低于彼此，要么相应地缩放。
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<!--===================================================css links===================================================!-->
<link href='http://fonts.googleapis.com/css?family=Raleway:600,500,400,200' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,700,900,100,300' rel='stylesheet' type='text/css'>
<link href="css/default_style.css" rel="stylesheet" type="text/css" />
<link href="css/contact_style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--===================================================Header===================================================!-->
<div class="wrapper">
<div class="headerwrap">
<div class="social"> <a href="www.facebook.com"><img class="move" src="images/deviant.png"></a>
<a href="www.facebook.com"><img class="move" src="images/yt.png"/></a>
<a href="www.facebook.com"><img class="move" src="images/fb.png"/></a>
</div>
<!--close social!-->
<div class="header">
<div class="logo">
<img src="images/logo.png" />
</div>
<!--close logo-->
</div>
<!--close header!-->
<div class="menu">
<ul class="menutxt">
<li><a href="index.html">HOME</a>
</li>
<li><a href="about.html">PORTFOLIO</a>
</li>
<li><a href="manga.html">CONTACT</a>
</li>
</ul>
</div>
<!--close menu!-->
</div>
<!--close headerwrap!-->
<!--===================================================Contact===================================================!-->
<div class="toptxt">
<div id="test2">
<p class="menutxt">Get in touch...</p>
</div>
</div>
<div class="detailwrap">
<div class="contactspace"></div>
<!--close contactspace!-->
<div class="contact">
<img class="move2" class="hover" src="images/me2.png">
<p class="text">Luke Babich</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/phone.png">
<p class="text">+27 72 836 0954</p>
</div>
<!--close contact!-->
<div class="contact">
<img class="move2" class="hover" src="images/mail.png">
<p class="text">lukerbab@gmail.com</p>
</div>
<!--close contact!-->
<div class="contactspace"></div>
<!--close contactspace!-->
</div>
<!--close detailwrap!-->
<!--===================================================Footer===================================================!-->
<div class="footerwrap2">
<p class="foottxt">Designed and developed by Luke Babich- All Rights Reserved ©2015</p>
</div>
<!--close footerwrap!-->
</div>
<!--close wrapper!-->
</body>
</html>
CSS：
@charset "utf-8";
/*---------------------------- Content ----------------------------*/
.toptxt{
margin-top:70px;
width:100%;
}
/*.contactwrap{
width:100%; change back if cant figure it out
margin-top:60px;
}*/
.detailwrap{
top:70px; /*remove if needed*/
position:relative;
width:100%;
}
/* clearfix */
.detailwrap:after {
content: "";
display: table;
clear: both;
}
.contact{
position:relative;
width: 15%;
float: left;
margin: 0 1% 2% 0;
}
.contactspace{
float:left;
width: 25%;
margin: 0 1% 1% 0;
}
.contact img{
width:90px;
display: block;
margin:0 auto;
}
.contact .text {
position:relative;
top:-15px;
text-align:center;
visibility:hidden;
}
.contact:hover .text {
animation: fadein 2s;
visibility:visible;
}
img.move2 {
bottom:0px;
transition: transform 1s cubic-bezier(0.2, 1, 0.44, 1.2);
}
img.move2:hover {
-moz-transform: translate(-2px, -2px);
-ms-transform: translate(-2px, -2px);
-o-transform: translate(-2px, -2px);
-webkit-transform: translate(-2px, -2px);
transform: translate(0px, -10px)
}
/*---------------------------- Content ----------------------------*/
.contentwrap{
margin-top:500px;
width:100%;
z-index:500;
background:#171717;
}
.textwrap{
position:relative;
width:100%;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/* clearfix */
.textwrap:after {
content: "";
display: table;
clear: both;
}
.content,
.divider,
.content2,
.contentspace {
text-align:center;
float: left;
}
.divider{
width: 24%;
float: left;
margin: 0 1% 1% 0;
}
.divider img{
display: block;
margin-top:50px;
margin-left: auto;
margin-right: auto;
}
.content,
.content2 {
width: 15%;
float: left;
margin: 0 1% 1% 0;
}
.content img{
width:15%;
}
.contentspace{
width: 20%;
margin: 0 1% 1% 0;
}
.headertxt{
font-family: 'Roboto', sans-serif;
font-weight:600;
font-size:1.5vw;
}
/*---------------------------- Footer ----------------------------*/
.footerwrap2{
position:relative;
top:70px; /*remove if needed*/
width:100%;
z-index:501;
-moz-box-shadow: 0px -10px 20px 0px #000;
-webkit-box-shadow: 0px -10px 20px 0px #000;
box-shadow: 0px -10px 10px 0px #000;
}
/*---------------------------- Textfader ----------------------------*/
#test2 p {
animation: fadein 5s;
-moz-animation: fadein 5s; /* Firefox */
-webkit-animation: fadein 5s; /* Safari and Chrome */
-o-animation: fadein 5s; /* Opera */
transition: opacity 5s;
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
我不确定问题是否会出现我的div都是同一个class.contact（不确定这是否会影响溢出div的位置）
答案 0 :(得分：2)
我会将.contacts空间全部移除，而是将.contact居中并添加最小宽度。
.detailwrap{
top:70px;
position:relative;
width:100%;
text-align: center; /* center align .contacts */
}
.contact {
display: inline-block; /* make it possible to use text-align */
position:relative;
width: 15%;
min-width: 115px; /* avoid 15% being making the contacts less than 115px */
margin: 0 1% 2% 0;
}
答案 1 :(得分：-1)
你应该尝试使用
display: block; float: left; margin: auto
理由是你在我看来不必要地进行定位，而你所处的位置（相对）会导致你不想要的东西被推动，因为它相对于它的当前位置是正确的位置，除非你这样做，否则它的反应非常快。